Question

对不起这个noob问题，但我现在已经好几个小时了。

我正在尝试创建一个<li>浮动的无序列表。并且设置了窗口的宽度。

问题是当<li>太多<li>它不会添加滚动而不是它会使<ul id="someUL"> <li> whatever </li> <li> whatever </li> <li> whatever </li> </ul>不适合另一行

这是一个例子：

{{1}}

实际上，在小提琴上表现得更好。

以下是我在http://jsfiddle.net/eSckg/1/

中的含义示例

我的问题我该如何做呢？

Answer 1

试试这个......

<style>
#someDIV{
    width:200px;  
    overflow-x:scroll;
    overflow-y:hidden;
    height:40px;
    padding:10px; 
}
#someUL{
    background:orange; 
    height:20px; 
    /* 3 li width=80*3=240px */
    width:240px;
}

#someUL li{ 
    list-style:none; 
    float:left; 
    background:white; 
    margin:0px 10px;
    width:60px;
    /* the width of each li is 60+10+10=80px */
}
</style>
<div id="someDIV">
<ul id="someUL">
    <li> whatever </li>
    <li> whatever </li>
    <li> whatever </li>
</ul>
</div>

Answer 2

您需要增加#someUL的宽度。

updated fiddle

浮动左<li>设置宽度和溢出问题</li>

2 个答案: