在水平柔性项目列表周围填充相等

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。我想在这张图片中有类似的内容：

Answer 1

第1步

允许在所有列表项之间平均分配可用空间并使文本居中（如图中所示）。

将此添加到您的CSS：

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

第2步

启用锚元素（a）以扩展其容器的整个宽度（以便整个li可单击）。

将此添加到您的CSS：

li a { display: block; }

Revised Demo