HTML，溢出：滾動和浮動

我有一個div封裝了許多無序列表（ul）。我有每個UL設置爲「浮動：左」。我也有父div包含他們設置爲「overflow-x：scroll」。發生了什麼事情是，當它們碰到頁面的邊緣並且不是並排地利用父div的滾動屬性（滾動條在那裏）時，ul正在包裝。爲什麼？我怎樣才能解決這個問題？HTML，溢出：滾動和浮動

感謝您的任何幫助。

來源

2011-05-08 s2cuts

你需要在另一個div來插入這些ULS，對此你給寬度= [UL的寬度] * [UI的數量]
http://jsfiddle.net/seler/gAGKh/ 或數UI的總寬度 http://jsfiddle.net/seler/gAGKh/1/

來源

2011-05-08 07:57:35 seler

創建一個內部div有助於很多。我沒有使用JS來計算合適的寬度，而是發現將新內部div的靜態寬度設置爲足夠大的寬度以應對最極端的情況並不會損害佈局。謝謝seler。 – s2cuts 2011-05-08 17:39:02

@ s2cuts可能只有在你有恆定的ul寬度和恆定的ul數時纔有效。 – seler 2011-05-08 17:48:06

令人討厭的JavaScript修復，由ddlshack描述的答案是一個更乾淨的解決方案。 – user1226868 2013-04-10 13:48:51

因爲你飄來上行線路，也不用在文件中存在流通了，所以他們不會展開父DIV（因此包裝。）

嘗試父格，允許設置一個明確的寬度讓他們全部並肩存在。

此外，如果您沒有清除父div中的UL，那麼您很可能會遇到與垂直問題相關的問題。確保你清楚你的花車:)

來源

2011-05-08 07:09:11 Tim

解釋是我查詢的一部分，謝謝。你也可以解釋你的意思是「確保你清除你的浮標」嗎？ – s2cuts 2011-05-08 17:41:46

@ s2cuts確保你使用類似[clearfix]（http://www.webtoolkit.info/css-clearfix.html）的東西來擴展你的父容器到內容的高度。否則，您將遇到類似於橫向寬度問題的垂直高度問題。只是一個頭。 – Tim 2011-05-09 01:39:51

您需要：

充分利用<li>也浮動。
將固定寬度設置爲每個<ul>。
將固定寬度設置爲包含<div>，足以容納所有列表。

例如：

ul { width: 250px; } 
li { margin-left: 5px; } 
ul, li { float: left; } 
div { overflow-x: scroll; width: 750px; }

Test case。

來源

2011-05-08 07:18:04

你可以設置你的列表項目以顯示：inline-block，然後使用white-space：nowrap。適用於大多數現代瀏覽器。

http://jsfiddle.net/gAGKh/22/

來源

2012-04-21 17:02:00 ddlshack

HTML，溢出：滾動和浮動

回答

相關問題