排列列表元素水平溢出

我有7裏在ul框中，每個人有20％的寬度，這意味着它需要140％的寬度所以我必須設置這與CSS和水平溢出。但在我的情況下，它只顯示4裏，其他人隱藏沒有滾動！什麼是在一行中顯示所有li的解決方案！？排列列表元素水平溢出

<style> 
#list1 > li { 
list-style-type: none;width:20%; 
height:195px;border:1px solid gray; 
float:left;margin:2px;text-align: center; 
} 
</style> 
<ul style='border:1px solid red;width:90%;height:215px;overflow-x:scroll;overflow-y:hidden;' id=list1> 

<li> 
<b>ocr 1</b><br /> 
</li> 
<li > 
<b>ocr 100</b><br /> 
</li> 
<li > 
<b>ocr 1000</b><br /> 
</li> 
<li > 
<b>ocr 2000</b><br /> 
</li> 
<li > 
<b>ocr 5000</b><br /> 
</li> 
<li > 
<b>ocr 10000</b><br /> 
</li>  
<li > 
<b>ocr 15000</b><br /> 
</li> 
</ul>

來源

2013-11-28 peiman F.

您需要刪除從LIfloat和更新您的CSS來包括以下內容。這會將您的LI元素設置爲內嵌元素，以便它們將相互跟隨，並且0123'上的設置white-space:nowrap;將阻止它們打包並創建所需的溢出行爲。

#list1 { 
     white-space:nowrap; 
    } 
    #list1 > li { 
     display:inline-block; 
     ...

這裏是包括一些進一步的調整，例如移除從UL填充到所有的箱子轉移到左側的JSFiddle的更新。

來源

2013-11-28 16:53:05 Jonathan

謝謝！這一直奏效！ –

@peimanF。很高興我能幫上忙。 – Jonathan

這固定，但所有李都對齊，我有20px免費和我的ul的左側，我該如何解決這個問題！？ –

#list1 { 
    white-space:nowrap; 
    padding:0; 
    border:1px solid red; 
    width:90%; 
    height:215px; 
    overflow:scroll; 
} 
#list1 > li { 
    list-style-type:none; 
    width:20%; 
    height:195px; 
    border:1px solid gray; 
    margin:2px; 
    text-align: center; 
    display:inline-block; 
}

一些錯誤，即20％寬度li元素中的7個並不意味着它需要總寬度的140％。還應考慮ul元素填充，li元素邊距，邊框等。

來源

2013-11-28 17:01:18

排列列表元素水平溢出

回答

相關問題