JSFiddle Example

Question

我有一个像this这样的html页面结构：

<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元素都适合他们的父母div（#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

是的，你可以使用灵活的盒子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

Answer 4

您可以尝试在列表中将“display”设置为“table”，在li上设置“table-cell”。但只有当所有li元素都包含相同宽度的内容时，它才能正常工作。当然，列表本身必须有明确定义的宽度。

使用父宽度调整所有子宽度

4 个答案:

JSFiddle Example