[分享]css中怎么让li标签两端对齐

在CSS中，让li标签两端对齐是很常见的问题。下面我们来详细探讨下如何实现这个效果。首先，我们需要在HTML中给ul标签添加一个class，方便我们对其进行样式控制。如下所示： Item 1 Item...

在CSS中，让li标签两端对齐是很常见的问题。下面我们来详细探讨下如何实现这个效果。
首先，我们需要在HTML中给ul标签添加一个class，方便我们对其进行样式控制。如下所示：

<ul class="clearfix"><br>
  <li>Item 1</li><br>
  <li>Item 2</li><br>
  <li>Item 3</li><br>
  <li>Item 4</li><br>
  <li>Item 5</li><br>
</ul><br> 

接着，在CSS中为这个class添加如下样式：

.clearfix {<br>
  display: flex;<br>
  justify-content: space-between;<br>
  flex-wrap: wrap;<br>
}<br>

.clearfix li {<br>
  width: calc(20% - 20px);<br>
  margin-bottom: 20px;<br>
}

可以看到，我们使用了flex布局和calc函数来实现对齐效果。其中，justify-content: space-between表示每个li标签之间的距离是相等的，而flex-wrap: wrap则是让li标签可以自动换行，不会超出父容器的范围。
此外，我们还需要为li标签添加一定的宽度和底部的margin，以保证在自动换行的情况下，每一行的li标签宽度和间距相同。
最终效果如下所示：

• Item 1


• Item 2


• Item 3


• Item 4


• Item 5

总之，使用flex布局和calc函数是实现li标签两端对齐的可行方案。当然，也可以使用其他方式来实现，具体取决于实际项目的需求。