css怎么让li元素横着显示

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，都可以实现这个效果。在实际开发中，我们可以根据具体的需求选择不同的方式实现横向排列。