使用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

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

使用float

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

ul#menu li {
    float: left;
}

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

中指定高度

这意味着inline-block留下的差距不会占用任何空间，因此效果相同

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>

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

Answer 2

因为你的</li><li>元素之间有空格。如果删除关闭和打开li之间的空白，这将消除间隙。

Answer 3

在示例中，在li中设置float:left;修复它，我不知道它是否是您要找的。