Question

我有一个UL列表，我已使用float: left转换为列，并为每个列添加width: 300px。如果总列宽比页面长，我需要这些列跨越页面并使页面从左向右滚动。

但此刻，一旦达到页面宽度，下一列就显示在下方，而不是让页面从左向右滚动。

我已尝试使用overflow: auto和white-space: nowrap，这通常有效，但不适用于此情况。

这是我的CSS：

#container {
    overflow: auto;
    white-space: nowrap;
    }
#container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    white-space: nowrap;
    }
#container ul li {
    float: left;
    width: 300px;
    margin-right: 5px;
    }

HTML：

<div id="container">
<ul>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
</ul>
</div>

我能想到的唯一另一个选择是使用JavaScript强制DIV上的宽度，但如果可能的话，我宁愿不这样做。

Answer 1

将float: left替换为display: inline-block作为您的LI。

#container ul li {
    /*float: left;*/
    display: inline-block;
    width: 300px;
    margin-right: 5px;
}

演示： http://jsfiddle.net/Eft9J/

Answer 2

是或仅将您的li定义为块级项目。 Li会自然地显示内联，让它们浮动，你需要告诉他们遵循盒子模型：

#container ul li {
    float: left;
    display:block;
    width: 300px;
    margin-right: 5px;
    }

然后你需要清楚最后一个元素：

#container ul li::last{
     clear:both;
}

CSS：阻止LI在UL中包装

2 个答案: