CSS修复容器和溢出元素

Question

我想知道这是否是一种强制固定容器的溢出元素在同一行而不是在新行上的方法。

http://jsfiddle.net/vrSRE/3/

谢谢。

Answer 1

是的，有办法。

您必须将float: left替换为display: inline-block，并将white-space: nowrap添加到父元素：

请参阅：http://jsfiddle.net/vrSRE/4/

ul {
    width: 300px;
    height: 30px;
    background: red;
    white-space: nowrap
}
li {
    display: inline-block
}

如果您不希望元素之间有任何空格，那么解决这个新问题的最简单方法就是删除HTML中的空白，如下所示：

• http://jsfiddle.net/vrSRE/6/

有关您可能不关心删除空间的其他选项，请参阅：

• 如何删除内联块元素之间的空格

最后，如果您关心IE7支持，请使用以下内容：

• http://jsfiddle.net/vrSRE/7/

Answer 2

请参阅：http://jsfiddle.net/keBFd/

您可以使用white-space: nowrap和display: inline，但您可能不需要display: inline。