html - 如何使所有列表项拉伸(stretch)到容器的全宽

Question

我试图创建一个响应式导航，但我无法让菜单项相对于容器拉伸(stretch)自身。

让所有元素自动适应容器的整个宽度的最有效的现代方法是什么？

nav {
  border: solid 1px #000;
  width: 700px;
}

ul {
  width: 100%;
  list-style-type: none;
  width: 100%;
}

ul li {
  padding: 25px;
  display: inline-block;
  background: #000;
  color: #fff;
}

<nav>
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
    <li><a href="#">f</a></li>
  </ul>
</nav>

Answer 1

我会按如下方式使用 CSS 表格。

对于 ul，使用 display: table 并将边距和填充归零，并将宽度设置为 100%。

对于ul li，使用display: table-cell。

考虑到链接文本/标签的宽度，表格单元格将以合理的方式自行调整到父级的宽度。

注意:我假设您希望链接是内联的，这样所有链接都会填满宽度，而不是单个链接占据 100% 的宽度。否则，将 li 元素的 display: inline-block 更改为 display: block，但由于这太明显了，我假设你想要水平布局。

nav {
  border: solid 1px #000;
  width: 700px;
}
ul {
  width: 100%;
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
}
ul li {
  padding: 25px;
  display: table-cell;
  background: #000;
  color: #fff;
}

<nav>
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
    <li><a href="#">f</a></li>
  </ul>
</nav>