Question

可能重复：
Horizontal scroller in CSS

我有320像素宽DIV。内部有一个UL LI导航，其中每个LI都会向左浮动，以便在一行中显示它们。我希望它们彼此相邻堆叠并在父DIV底部显示滚动条以水平滚动内容。

我不知道LI s（动态生成）
我不知道UL（动态生成）
必须一次看到多个项目，而不是一次只能看到一个

我想用CSS-only方法来解决这个问题。

 #menu
 {
    width: 320px;
    overflow: scroll;
 }

 ul li
 {
    float: left;
    display: block;
 }

 <div id="menu">
    <ul>
       <li><a href="#">Car</a></li>
       <li><a href="#">Very long text item</a></li>
       <li><a href="#">Foobar foobar</a></li>
    </ul>
 </div>

问题：它不起作用。没有水平滚动条。 Floats在父DIV中以多行包装和堆叠。

Answer 1

你需要漂浮<ul>左边，并给它一个疯狂的大负边距，以确保它的宽度总是超过外部DIV的宽度。像这样：

#menu
{
  width: 320px;
  overflow: auto;
}

ul
{
  float: left;
  margin-right: -30000px;
}

ul li
{
  float: left;
  display: block;
}

UL上的float: left可确保您没有巨大边距所产生的额外空白区域。

jsFiddle：http://jsfiddle.net/8SEQT/5/

Answer 2

试试这个...... 指定每个<li>的宽度..

li
{
    width:100px;
    float:left;
    display:block;
    margin-right:-110px
}

margin-right:-xxxpx将在每个项目之后留下一些xxxpx空间以容纳另一个项目，从而阻止列表项目进入下一行......

Answer 3

获得水平滚动的唯一方法是UL比#menu宽。

由于您不知道您将拥有多少元素，因此您可以将UL元素设置为随机高的宽度，例如： ul {width:9000px;}将所有浮动LI元素保存在一行中。

另外，我会将你的#menu设置为overflow：auto而不是overflow：scroll。

Answer 4

试试这个。您甚至可以计算每个li的宽度并将其添加到var中，然后将其设置为菜单的宽度。

http://jsfiddle.net/jxA3d/

/ <强>更新 /

我已将其更新为完全动态。

如何在固定宽度的溢出div中浮动无序列表

4 个答案: