适应所有的孩子的父母与宽度

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%; 
}