使用 CSS 将元素的宽度设置为“0”（不是绝对定位）

Question

我有一个元素，即使我定义了 "max-width=0" 它也有 4px 的宽度，看图：

当我将元素定位为绝对时，它消失了，但由于 css 过渡（徽标在向下滚动 > 250px 时滑入）我无法将其定位为绝对。

这是CSS:

#page-wrap.oben ul#menu li.menutext {
    padding: 0;
    line-height: normal;
    overflow: hidden;
}
#page-wrap.oben li.menutext a {
    font-size: 24px;
    max-width: 0;
    opacity: 0;        
    vertical-align: middle;

    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

这是 HTML:

<li class="menutext biggerfont">
   <a href="#">
       Schooool!
   </a>
</li>

Answer 1

这是因为您的 </li><li> 元素之间有一个 space。如果您删除关闭和打开 li 之间的白色 space，这将消除间隙。

Answer 2

例子中，在float:left;中设置li修复，不知道是不是你要的

Answer 3

这是由于 display: inline-block; 的工作方式所致，因此您有以下选择：

改用浮点数

这会将元素直接堆叠在一起。

ul#menu li {
    float: left;
}

设置ul的文字大小为0，然后在li

中指定高度

这将意味着inline-block留下的空隙不占用任何space，所以同样的效果

ul#menu {
    font-size: 0;
}
ul#menu li {
    font-size: 12px;
}

更改您的 HTML 标记

<li> 元素之间的新行是导致此问题的原因。如果您不想更改 css，则删除结束标签和开始标签之间的换行符将具有相同的效果，并允许您继续使用 inline-block

<li>item</li><li> Item2</li><li> Item3</li>

None 已在您的示例中进行了测试，但任何解决方案都应该适合您。 float 示例可能会导致不同的问题，具体取决于容器的设置方式。

使用 CSS 将元素的宽度设置为“0”（不是绝对定位）

Set width of element to "0" (not absolute positioned) with CSS

html

css

position