[分享]css3怎么让无序列表成为一排

CSS3拥有强大的样式控制能力，可以让无序列表成为一排。通常情况下，我们的无序列表是居左对齐的，每个列表项各占用一行。但如果我们想要让它们成为一排，可以这样做：ul { liststyle: none...

CSS3拥有强大的样式控制能力，可以让无序列表成为一排。通常情况下，我们的无序列表是居左对齐的，每个列表项各占用一行。但如果我们想要让它们成为一排，可以这样做：

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

li {
  display: inline-block;
  margin-right: 10px;
} 

以上代码中，我们先去掉了无序列表的默认样式，然后将每个列表项的display属性设置为inline-block，这样它们就可以放在同一行了。为了让它们之间留有一定的间距，我们还设置了margin-right属性。

需要注意的是，当列表项很多时，可能会超出一行，这时我们需要加入一些断点来保证布局的稳定性。例如：

@media screen and (max-width: 768px) {
  li {
    display: block;
    margin: 10px 0;
  }
} 

在上述代码中，我们使用了@media媒体查询，当屏幕宽度小于等于768px时，将列表项的display属性设置为block，这样它们就可以重新变为竖直排列了。