html - 如何使同级元素具有最大同级元素的宽度？

Question

我在 ul 内有 2-3 个 li。 ul 具有设定的宽度。 li 标签中的文本会有所不同，但我们希望每个标签的最小宽度保持为 100px。对于包含更多文本的 li，我们希望确保其左侧和右侧有 15 个像素的填充。

理想情况下，所有 li 的宽度都相同，即它们都具有最大 li 的宽度。 min-width:100px 确保所有 li 在都低于 100 像素时具有相同的宽度，但如果其中一个高于此宽度，则其他必须缩放直到匹配为止。

我可以仅使用 css/html 实现此目的吗？我相信我可以使用 javascript 轻松解决这个问题，但我想在没有它的情况下解决它。

jsfiddle: https://jsfiddle.net/a8ho4b04/3/

html:

<ul>
  <li class="li-1">--- --------</li>
  <li class="li-2">------- ------ ------</li>
  <li class="li-3">---</li>
</ul>

CSS:

ul {
  display: block;
  width: 450px;
}
li {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 100px;
  text-align: center;
}
.li-1 {
  background-color: green;
}
.li-2 {
  background-color: yellow;
}
.li-3 {
  background-color: cyan;
}

Answer 1

flex 盒

ul {
  width: 450px;
  display: flex;
  list-style: none;
}
li {
  flex: 1;
  border-radius: 3px;
  padding: 5px 15px;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 100px;
  text-align: center;
}
.li-1 {
  background-color: green;
}
.li-2 {
  background-color: yellow;
}
.li-3 {
  background-color: cyan;
}

<ul>
  <li class="li-1">--- --------</li>
  <li class="li-2">------- ------ ------</li>
  <li class="li-3">---</li>
</ul>

CSS 表格

ul {
  width: 450px;
  display: table;
  table-layout: fixed;
  list-style-type: none;
}
li {
  display: table-cell;
  border-radius: 3px;
  padding: 5px 15px;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 100px;
  text-align: center;
}
.li-1 {
  background-color: green;
}
.li-2 {
  background-color: yellow;
}
.li-3 {
  background-color: cyan;
}

<ul>
  <li class="li-1">--- --------</li>
  <li class="li-2">------- ------ ------</li>
  <li class="li-3">---</li>
</ul>