Question

我希望有一堆包含文本的矩形，彼此相邻，并在必要时包裹到下一行。我有一个每个矩形的最大宽度，任何不适合矩形的文本都应该被隐藏。

这是我写的代码

HTML

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li>
        <li>Something else</li>
        <li>Something else 2</li>
        <li>Something else 3 </li>
        <li>Something else 4</li>
    </ul>
</div>

CSS

#outer {
    background-color: #0000ff;
    width: 500px;
}

#list {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#list li {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    white-space:nowrap;
    height: 24px;
    padding: 0px;
    background: #ff0000;
    margin: 0px;
}

它在Chrome中完美运行。

在Firefox / IE中，每个矩形之间添加了一个小的垂直间隙/边距。

我可以通过移除LI元素上的'overflow：hidden'来消除差距，但是这个可以让矩形自由地生长 - 这就是我想要避免的。

有人知道为什么会这样吗？

Answer 1

尝试将所有<li>标记放在同一行。浏览器将换行符渲染为空格。

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li><li>Something else</li><li>Something else 2</li><li>Something else 3</li><li>Something else 4</li>
    </ul>
</div>

Answer 2

您可以使用浮动的块元素，还是必须内嵌块元素？

此处为your example，此处为the code working，其中包含收缩包装的浮动元素。

Answer 3

您只需将vertical-align: top添加到#list li：http://jsfiddle.net/thirtydot/PF4fW/

您使用display: inline-block的每个时间，您应该考虑设置vertical-align。

Look at "Series A" here比较不同的可能共同值。

Firefox / IE的差距/保证金问题

HTML

CSS

3 个答案: