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

使用flex-grow上的li媒体资源。这不会添加填充，但会强制弹性项目的宽度增加以填充空间。然后，您可以根据需要调整内容。请参阅w3 schools。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

在一条线上具有可变宽度的等间距DIV

1 个答案: