CSS列表横排排列在网页开发中，列表是一个经常会使用到的元素。在默认情况下，列表元素会以垂直方向排列，比如下面这个无序列表： 列表项1 列表项2 列表项3 但是有时候，我们需要将这些列表项横向排列。...

CSS列表横排排列

在网页开发中，列表是一个经常会使用到的元素。在默认情况下，列表元素会以垂直方向排列，比如下面这个无序列表：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul> 

但是有时候，我们需要将这些列表项横向排列。在CSS中，我们可以通过设置列表元素的display属性来实现横向排列。

首先，我们需要将列表样式设置为inline-block或者inline：

<style>
  li {
    display: inline-block;
    /* 或者 display: inline; */
  }
</style> 

上述代码将会把列表项变成一个个行内块元素，使得它们可以在一行内排列。但是，由于每个列表项之间还会有一些默认的间距，我们需要将它们设置为0来让它们挨在一起：

<style>
  li {
    display: inline-block;
    /* 或者 display: inline; */
    margin: 0;
    padding: 0;
  }
</style> 

最后，如果我们希望列表项之间有一些间距，可以设置它们的右边距或左边距：

<style>
  li {
    display: inline-block;
    /* 或者 display: inline; */
    margin: 0;
    padding: 0;
    margin-right: 10px; /* 或者 margin-left: 10px; */
  }
</style> 

这样，我们就可以将列表项变成横向排列了。

完整的代码如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<style>
  li {
    display: inline-block;
    /* 或者 display: inline; */
    margin: 0;
    padding: 0;
    margin-right: 10px; /* 或者 margin-left: 10px; */
  }
</style> 

通过上述方法，我们可以轻松实现CSS列表横向排列。