CSS如何实现列表项横向排布

要让列表项横向排布，我们需要给列表项设置样式，这里介绍两种方法：

1. 使用display: inline-block

给列表项设置display: inline-block样式，就可以让它们横向排布，代码如下：

ul {
  list-style: none;
}

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

其中，list-style: none用来去掉列表项前面的默认样式，margin-right: 10px用来给列表项之间添加一定的间距

2. 使用float

给列表项设置float: left样式，也可以实现横向排布，代码如下：

ul {
  list-style: none;
}

li {
  float: left;
  margin-right: 10px;
}

同样地，list-style: none用来去掉列表项前面的默认样式，margin-right: 10px用来给列表项之间添加一定的间距