HTML列表元素：將父寬度共享爲相等部分

Question

我有一個父項<ol>和<li>項中的一對。

<ol style='width=800px;display :block;float:left;'> 
    <li style='display :block;float:left;'> Item 1 </li> 
    <li style='display :block;float:left;'> Item 2 </li> 
    <li style='display :block;float:left;'> Item 3 </li> 
    <li style='display :block;float:left;'> Item 4 </li> 
</ol> 

有什麼辦法我的列表項可被安排的方式爲在那裏將平分父寬度（800像素），並且每個項目都會有寬度的一樣多嗎？即每個<li>將需要200px寬度。

我不想硬編碼值。有沒有什麼風格屬性可以做到這一點？

我不想hardocode如20％或東西的寬度，因爲列表項是動態added.it可能是4或5或6有時

Answer 1

試試這個：http://jsfiddle.net/QzYAr/

• 詳情上display: table-cell：Is there a disadvantage of using `display:table-cell`on divs?
• table-layout: fixed ensures等於寬度li元件。

CSS：

ol { 
    width: 400px; 
    /*width: 800px;*/ 

    display: table; 
    table-layout: fixed; /* the magic dust that ensures equal width */ 
    background: #ccc 
} 
ol > li { 
    display: table-cell; 
    border: 1px dashed red; 
    text-align: center 
} 

HTML：

<ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ol> 

Answer 2

請注意：樓主編輯他們的問題在發佈此答案後排除百分比。

是的，你只需要計算出每個使用的百分比。在這種情況下，20％。

此外，您的HTML有一些小問題（缺少報價和width=而不是正確的width:）。

<style> 
    ol { width:800px;display :block;float:left; } 
    li { border:1px solid black; display :block;float:left; width:20%; } 
</style> 
<ol> 
    <li> Item 1 </li> 
    <li> Item 2 </li> 
    <li> Item 3 </li> 
    <li> Item 4 </li> 
</ol> 

---

更新：

雖然你可以逃脫不使用百分比限定像素，沒有與塊元素沒有辦法脫身沒有定義任何寬度值（和寬度值僅作爲單位或百分比有效）。

不是我建議你使用表格，而是表格單元格是HTML中唯一類似於你所要求的行爲的元素。

Answer 3

正如Renesis指出的那樣，我認爲表格單元格是唯一的選擇，除非您正在編寫腳本。儘管您可以在CSS中使用表格單元格。

#menu {display: table-row;} 
#menu li {display: table-cell;} 

..這將模擬行爲。請注意，在IE中，它將像往常一樣在較低版本中導致問題。

Answer 4

我認爲這是你要求的。但它需要jQuery。

http://jsfiddle.net/sKPLQ/3/

CSS：

ul { 
    width: 800px; 
} 

li { 
    display: inline-block; 
    float:left; 
} 

JS：

var evenWidth = $(".list").width()/$(".list li").size(); 
$(".list li").css("width", evenWidth); 

HTML：

<ul class="list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Answer 5

這裏是簡約的設計。它會產生一個響應等距離細胞

<style> 
    div { border:1px solid red; width:400px; height:400px; } 
    ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; } 
    li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; } 
</style> 

<div> 
    <ul> 
     <li>CELL 1</li> 
     <li>CELL 2</li> 
     <li>CELL 3</li> 
     <li>CELL 4</li> 
    </ul> 
</div> 

神奇的是width:1%; position:relative; display:table-cell;