div水平滚动不工作自动

Question

我想根据内容宽度开发div水平滚动。但是，这并不完美，请帮助我。这工作，如果我设定的上行宽度具体PX但不自动

这是我的CSS和HTML

.sri{ 
width:550px; 
height:40px; 
margin:auto; 
padding:0px; 
overflow-x:scroll; 
overflow-y:hidden; 
} 
.sri ul{ 
margin:0px; 
padding:0px; 
list-style:none; 
width:auto; 
} 
.sri ul li{ 
width:auto; 
margin:0px 5px; 
padding:0px 5px; 
float:left; 
height:auto; 
background:#CCCCCC; 
color:#333333; 
} 

<div class="sri"> 
<ul> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li>         
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li> 
    <li>something content comes here</li>     
</ul> 

Answer 1

在这种情况下

最简单的解决方法是建立一个庞大的宽度一样width: 9999px上.sri ul：

Live Demo

---

糟糕：它适用于IE8和Chrome，但不适用于Firefox/Opera。调查。

---

这里的尝试＃2：

display: table和朋友是我能找到得到这个工作始终的唯一途径。

如果内容不超过550px，将不会有滚动条。

Live Demo

HTML：

<div class="sri"> 
    <ul> 
     <li>something content comes here</li> 
     .. 
    </ul> 
</div> 

CSS：

.sri { 
    width: 550px; 
    height: 40px; 
    margin: auto; 
    padding: 0; 
    overflow-x: auto; 
    overflow-y: hidden 
} 
.sri ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: table 
} 
.sri ul li { 
    margin: 0 5px; 
    padding: 0 5px; 
    background: #ccc; 
    color: #333; 
    display: table-cell; 
    white-space: nowrap 
} 

Answer 2

什么时候UL的宽度设置为auto，你所看到的是自然行为浮动元素。

2个选择：

1）你可以使用一个表，而不是一个无序列表中。无论容器宽度如何，这将水平放置。

2）您可以根据您拥有的元素数量（li的宽度* li的数量= UL的总宽度）动态地设置UL的宽度。我在猜测，因为在列表中可能出现可变数目的项目，您正在生成列表服务器端？如果是这种情况，您应该可以很容易地设置UL宽度。只要在没有足够的项目时不滚动 - 只需设置overflow-x：auto;