1. 前言
我们常见的列表一般都是竖着排列的，在某些情况下，需要将列表横向排列。这时候就需要使用CSS去调整样式，让列表的元素可以横向排列。在本文中，我们就来学习如何使用CSS让列表元素横向排列。
2. 横向排列的列表
假设我们现在有一个无序列表，里面包含了若干个列表项。默认情况下，这些列表项都是竖向排列的，如下所示：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
如果我们想要将这些列表项横向排列，可以通过很多方法来实现。下面是其中的两种方法：
2.1 使用float
我们可以使用CSS的float属性来实现横向排列的效果。将每个列表项都设置成float:left或者float:right，就可以让它们横向排列。
ul {
list-style:none;
}
li {
float:left; /* 或者 float:right */
}
这里我们还将列表默认的标记去掉，否则会对列表的布局造成影响。
2.2 使用display:inline-block
另外一种常见的方法是使用CSS的display:inline-block属性。将每个列表项都设置成display:inline-block，就可以让它们横向排列。
ul {
list-style:none;
}
li {
display:inline-block;
}
以上两种方法都可以让列表项横向排列，它们的效果是一样的。只是在使用的时候需要根据具体的需求选择哪一种。
2.3 案例演示
接下来，我们来看一下使用以上两种方法实现横向排列的效果。
2.3.1 使用float实现
以下是使用float属性实现横向排列的代码：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
ul {
list-style:none;
}
li {
float:left;
}
效果如下所示：
- 列表项1
- 列表项2
- 列表项3
- 列表项4
可以看到，每个列表项都横向排列了。
2.3.2 使用display:inline-block实现
以下是使用display:inline-block属性实现横向排列的代码：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
ul {
list-style:none;
}
li {
display:inline-block;
}
效果如下所示：
- 列表项1
- 列表项2
- 列表项3
- 列表项4
可以看到，每个列表项也都横向排列了。
3. 总结
通过本文，我们学习了如何使用CSS让列表元素横向排列。无论是使用float还是display:inline-block，都可以实现这个效果。在实际开发中，我们可以根据具体的需求选择不同的方式实现横向排列。
- 列表项1