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;