Question

所以，这是我的小提琴：http://jsfiddle.net/HQVs7/

我拥有的是：

#container div，具有固定的宽度和高度。

#content ul，一个包含潜在无限子女的列表。

.child li，需要水平显示内联（强制在容器上滚动）

我遇到的问题是使ul具有与其所有子元素内联（并排）相同的宽度，并且没有设置宽度。

我可以使用jquery，但是我试图尽量减少不必要的脚本，如果我能用css完成这个。

所以简单地说，看看jsfiddle中的蓝色框（列表项），他们正在下一行;我需要它们全部在一行上，其父级（#content）随之扩展，而不在ul上设置宽度。

有什么想法吗？

HTML：

<div id="container">
    <ul id="content">
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
    </ul>    
</div>

的CSS：

#container{
    width:600px;
    height: 150px;
    border: solid 1px black;
    display: inline-block;
    overflow: hidden;
    overflow-x: scroll;
}

#content{
    display: block;
    height: 150px;
 }

.child{
    width: 100px;
    height: 100px;
    margin: 2px;
    background-color: #00F;
    list-style: none;
    display: inline-block;
}

Answer 1

将white-space:nowrap;添加到#container

Demo Fiddle

More from MDN

nowrap：正常情况下折叠空白，但会抑制换行符（文本包装）在文本中。

由于内联元素的处理方式类似于文本，因此它们不会被包装到新的行中。

带内联子项的水平滚动

1 个答案:

Demo Fiddle