html - 在一行中具有可变宽度的等距 DIV

Question

我有未知数量的 div(有时 3 个，有时 6 个)，它们的宽度可变。

ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#navigation ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
#navigation li {
  background-color: yellow;

}
#navigation li:hover {
  background-color: red;
}

<div id="navigation">
  <ul>
    <li>E01</li>
    <li>Element02</li>
    <li>Ele03</li>
  </ul>
</div>

上面的例子展示了它的基本工作原理。但我需要的是一种方法，让元素左右填充两个元素之间的空间宽度的一半，这样基本上黄色背景就会接触到它旁边的一个元素。但我不知道如何实现这一目标。

我尝试了很多方法。 (flexbox, table-cell, floats) 但我从来没有找到这样做的方法。

Answer 1

在 li 上使用 flex-grow 属性。这不会添加填充，但会强制 flex 元素增加宽度以填充空间。然后您可以根据需要调整内容。参见 w3 schools .

例如:

ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#navigation ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
#navigation li {
  background-color: yellow;
  flex-grow: 1;
  text-align: center;
}
#navigation li:hover {
  background-color: red;
}

<div id="navigation">
  <ul>
    <li>E01</li>
    <li>Element02</li>
    <li>Ele03</li>
  </ul>
</div>