柔性項目的水平列表周圍的等間填充

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

STEP 1

允許的自由空間所有列表項之間的平等分配和居中文本（如圖像）。

添加到您的CSS：

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

STEP 2

啓用所述錨元件（a）來擴展它的容器的整個寬度（因此整個li是可點擊）。

添加到您的CSS：

li a { display: block; } 

Revised Demo