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

Possible Duplicate:
Horizontal scroller in CSS

可能重复:CSS中的水平滚动条

I have a 320px wide DIV. There's a UL LI navigation inside, where each LI is floated left to display them in a single line. I want them to stack next to each other and display a scrollbar at the bottom of the parent DIV to scroll the content horizontally.

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

I don't know the number of LIs (dynamically generated)

我不知道LI的数量(动态生成)

I don't know the width of UL (dynamically generated)

我不知道UL的宽度(动态生成)

Multiple items have to be visible at once, not just one at a time!

必须一次看到多个项目,而不是一次只能看到一个!

I'd like to use CSS-only method to solve this.

我想用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>

Problem: it doesn't work. No horizontal scrollbar. Floats wrap and stack in multiple lines in the parent DIV.

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

4 个解决方案

#1

You need to float the <ul> left as well, and give it a crazy big negative margin to ensure it's width always surpasses that of the outer DIV. Like so:

你需要漂浮

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

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

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

The float: left on the UL ensures you don't have all that extra white space made by the giant margin.

漂浮:UL上的左侧确保您没有巨大边缘所产生的所有额外空白区域。

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

#2

Try this one.. Assign the width of each <li> ..

试试这个..分配每个

的宽度..

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

The margin-right:-xxxpx will always leave some xxxpx space after each item to accommodate another item into it and thus prevent the list item from going to next line...

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

#3

The only way to get a horizontal scroll is if the UL is wider than #menu.

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

Since you don't know how many elements you will have, you could set your UL element to a randomly high width e.g. ul {width:9000px;} to keep all your floating LI elements in one row.

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

Also, i would set your #menu to overflow:auto rather than overflow:scroll.

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

#4

try this. You could even count the width of the each li and add that to a var then set that to the width of the menu.

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

http://jsfiddle.net/jxA3d/

/UPDATE/

I've updated it to be completely dynamic.

我把它更新为完全动态的。

#1