弹性项目水平列表周围的相等填充

Question

如何在 display: flex 和 justified-content 设置的元素之间设置相等的填充？

ul {
        background-color: #ddd;
        list-style-type: none;
        padding: 0;

        display: flex;
        justify-content: space-around;
    }

    li.active a {
        background-color: #111;
        color: #fff;
    }

<ul>
      <li><a href="#">Apples</a></li>
      <li class="active"><a href="#">Bananas</a></li>
      <li><a href="#">Coconut</a></li>
      <li><a href="#">Apples</a></li>
      <li><a href="#">Kale</a></li>
      <li><a href="#">Coconut</a></li>
      <li><a href="#">Kale</a></li>
      <li><a href="#">Kale</a></li>
      <li><a href="#">Coconut</a></li>
      <li><a href="#">Kale</a></li>
</ul>

Bootply example

约background-color活跃link。我想要这张图片中的东西：

Answer 1

第 1 步

允许在所有列表项中平均分配免费 space 并将文本居中（如图所示）。

将此添加到您的 CSS：

li { flex: 1; text-align: center; }

第 2 步

启用锚元素 (a) 以扩展其容器的整个宽度（因此整个 li 都是可点击的）。

将此添加到您的 CSS：

li a { display: block; }

Revised Demo

弹性项目水平列表周围的相等填充

Equal padding around horizontal list of flex items

html

css

flexbox