CSS Flexbox - 将项目宽度设置为最大值

Question

我有一个应该连续显示的项目列表。我动态地将一些具有不同文本长度的项添加到列表中。是否可以对齐左侧的项目并将每个项目的宽度设置为最大项目的宽度？

我添加了一张图片来澄清它：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item with long text added dynamically</li>
</ul>

Answer 1

使用javascript获取元素的宽度：

document.getElementById('yourID').clientWidth

然后您可以使用此值调整其他项目

Answer 2

我认为仅使用flex-box模型并且没有javascript就可以实现这一点。解决方案（取决于您的实际用例）将使用display: table：

＆＃13;

＆＃13;

ul {
  display: table;
  list-style-type: none;
  table-layout: fixed;
  padding: 10px;
  position: relative;
}
ul::before {
  position: absolute;
  z-index:-1;
  content: " ";
  left:0px;
  top:0px;
  bottom:0;
  width: 500px;
  background: #999;
}
li {
  display: table-cell;
  color: white;
  text-align: center;
  background: black;
  padding: 5px;
  height: 30px;
  line-height: 30px;
  width: 33%;
  white-space: nowrap;
}
li+li {
    border-left: 10px solid #999;
}

＆＃13;

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item with long text</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

请注意，它仍然很棘手，但我没有看到任何更好的基于CSS的解决方案。