ul的水平滾動條

出於某種原因，我無法阻止UL和它的LI包裝。我希望UL的寬度恰好是一行（不包裝）的LI的寬度，如果UL變得比nav-div（800px）更寬，我需要導航欄內的滾動條，以便滾動LI。ul的水平滾動條

我對顯示器，空白，寬度和高度進行了幾乎所有的嘗試，但是我只能讓它工作，如果我給UL一定的寬度。但是，這不是一個選項，因爲該頁面已生成並且可以包含1-20個LI。

有沒有人知道如何使滾動條上來沒有設置UL的寬度？

HTML：

<div id="nav"> 
    <ul id="navbuttons"> 
      <li>Some text</li> 
      <li>Some text</li> 
      ... 
    </ul> 
</div>

CSS：

div#nav 
{ 
    height: 100px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#nav ul li 
{ 
    margin-right: 15px; 
    float: left; 
    font-size: 12px; 
    list-style-type: none; 
}

來源

2011-09-15 Michiel

試試這個

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
}

來源

2011-09-15 14:49:24 j03w

這麼簡單 - 只需要擺脫浮動！ – Michiel

是的，但它花了我一段時間，然後我才能知道你知道：P ....顯然瀏覽器不會讓文本溢出，如果他們先用空白打...或類似的東西，我認爲這是真正的最新版本的OS X Firefox，Safari，Chorome – j03w

也將li顯示器設置爲內嵌塊作品。 –

通過設置在<ul>到inherit可以使用overflow property來設置元素的溢出行爲width。隨着值scroll，所有的元件的內容將滾動（在x和y方向），如果高度和內容的寬度溢出，箱的：

div#nav ul 
{ 
    overflow: scroll; 
    width: inherit; 
    height: inherit; 
}

來源

2011-09-15 13:25:47

警告：未經測試

將你不只是想設置一個寬度爲李家項目

div#nav ul li {  
    margin-right: 15px;  
    float: left;  
    font-size: 12px;  
    list-style-type: none; 
    width: 100px; 
}

然後將寬度設置爲一個固定的寬度和溢出的UL滾動？

div#nav ul { 
    width: 800px; 
    overflow: scroll; 
}

這會讓你UL在你的li過去的時候滾動說8，那是你在做什麼之後？

來源

2011-09-15 13:26:19 dougajmcdonald

可以使用display: inline-block; white-space: nowrap;爲包裝和display: inline或display: inline-block的孩子。

因此，它應該是這樣的：http://jsfiddle.net/kizu/98cFj/

而且，如果你需要支持IE的條件註釋添加這個技巧，使inline-block，它出現：

.navbuttons, 
.navbuttons LI { 
    display: inline; 
    zoom: 1; 
}

來源

2011-09-15 21:17:55 kizu

事實證明這是'漂浮：左'，這給了我麻煩，它使UL的高度和寬度更低 - 感謝您的幫助:) – Michiel

添加以下規則：

div#nav ul { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    white-space: nowrap; 
}

來源

2012-07-11 05:48:39

ul的水平滾動條

回答

相關問題