[分享]css列表内容两端对齐

 在网页设计中，列表是一个经常使用的元素，但是默认的列表样式可能不一定适合我们的需求。有时候我们需要对列表的内容进行两端对齐，这时候就可以使用CSS来实现。首先，我们需要把列表的样式设置为无序列表（u...

 在网页设计中，列表是一个经常使用的元素，但是默认的列表样式可能不一定适合我们的需求。有时候我们需要对列表的内容进行两端对齐，这时候就可以使用CSS来实现。
首先，我们需要把列表的样式设置为无序列表（ul）或有序列表（ol）。我们可以使用以下代码：

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
} 

这样可以去除默认列表样式，并且去掉列表外部的边距和内边距。接下来，我们可以使用CSS来实现两端对齐。以下是几种实现方式：
### 方式一：使用text-align
我们可以将列表项（li）的文本居中对齐，同时把列表项的伸展性（display）设置为table。这样就可以使列表项的文本在一行中自动居中对齐，实现两端对齐的效果。以下是代码：

li {
  display: table;
  width: 100%;
}
li span {
  text-align: center;
  display: table-cell;
} 

### 方式二：使用flex
我们还可以使用CSS3的弹性布局（flex）来实现两端对齐。首先，我们需要将ul的属性设置为flex，并使用空间分布属性（justify-content）设置为space-between。这样就可以将列表项平均分布在行上，并使它们填充整个容器。以下是代码：

ul {
  display: flex;
  justify-content: space-between;
}
li {
  width: 48%;
} 

###
综上所述，上述两种方式都可以实现列表内容两端对齐的效果。我们可以根据具体需求，选择不同的实现方式。