適應所有的孩子的父母與寬度

Question

寬度我有一個HTML頁面結構就像this：

<div id="list"> 
    <ul> 
     <li style="background-color:orange;">Lorem</li> 
     <li style="background-color:red;">Lorem</li> 
       ............. 
     <li style="background-color:black;">Lorem</li> 
     <li style="background-color:blue;">Lorem</li> 
    </ul> 
</div> 

在這個頁面上，我想所有的列表元素具有相同的寬度 - 我不關心的內容，只有顏色在這種情況下非常重要 - 我希望所有thos元素都適合父頁面（#list），當頁面剛剛加載時，這意味着不需要滾動。

而這個列表不是最終的，我可以在頁面加載後在列表中添加或刪除somme元素。我想知道是否有一種CSS方式來獲得這個結果，JavaScript在這種情況下並不適合。

這可能嗎？

Answer 1

您可以通過使用flex實現這種行爲：

HTML結構：

<div id="list"> 
    <ul> 
     <li style="background-color:orange;">Lorem</li> 
     <li style="background-color:black;">Lorem</li> 

     ... 

     <li style="background-color:blue;">Lorem</li> 
    </ul> 
</div> 

CSS：

#list { 
    border-style: solid; 
    border-width: 3px; 
    white-space: nowrap; 
} 

#list ul { 
    display: flex; 
    flex-direction: row; 
    margin: 5px; 
    padding: 0; 
} 

#list ul li { 
    border-style: solid; 
    height: 50px; 
    list-style-type: none; 
} 

這裏是一個工作演示：http://jsfiddle.net/kmbxawdd/1/

Answer 2

您可以嘗試將顯示設置爲列表中的「table」和li上的「table-cell」。但是，只有當所有li元素都包含相同寬度的內容時，它纔會像您期望的那樣工作。當然，列表本身必須有明確的寬度。

Answer 3

是，您可以使用彈性盒子：

#list { 
 
    display: flex; /* Magic begins */ 
 
    border: 3px solid; 
 
    padding: 1em; 
 
} 
 
#list > li { 
 
    width: 0;   /* Ignore the width of the content */ 
 
    flex-grow: 1;  /* Distribute remaining space equally */ 
 
    overflow: hidden; /* Hide possible overflow */ 
 
    height: 50px; 
 
    border-style: solid; 
 
}

<ul id="list"> 
 
    <li style="background-color:orange;">Lorem</li> 
 
    <li style="background-color:red;">Lorem</li> 
 
    <li style="background-color:black;">Lorem</li> 
 
    <li style="background-color:blue;">Lorem</li> 
 
</ul>

Answer 4

JSFiddle Example

Flexbox的是你的朋友。

div#list { 
    height: 800px; /*Whatever you want, really*/ 
    width: 800px; /*Again, substitute this with whatever size you like*/ 
} 
div#list ul { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-flow: row nowrap; 
    align-content: stretch; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
div#list ul li { 
    -webkit-flex: 0 1 100%; 
    flex: 0 1 100%; 
}