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/

对于您可能不关心删除空格的其他选项，请参阅：

• How to remove the space between inline-block elements?

最后，如果您关心IE7支持，请使用：

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

Answer 2

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

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