[分享]css中怎么把html li数列改成横列

在HTML中，我们经常使用有序列表来呈现一些内容，例如一个任务列表或者一个说明文档中的步骤。默认情况下，有序列表是以垂直的方式呈现的，每一项都是垂直放置的，这给阅读带来了一些困难。如果我们想让这些列表...

在HTML中，我们经常使用有序列表来呈现一些内容，例如一个任务列表或者一个说明文档中的步骤。默认情况下，有序列表是以垂直的方式呈现的，每一项都是垂直放置的，这给阅读带来了一些困难。如果我们想让这些列表项水平排列，该怎么办呢？
其实在CSS中，我们提供了两种方法来水平排列有序列表。下面将分别介绍这两种方法。
方法一：使用display属性
我们可以使用CSS的display属性来改变列表项的呈现方式。默认情况下，列表项的display属性是list-item，会以垂直的方式呈现，我们可以将它改为inline-block，来让它们变成水平排列的。

ol li {
  display: inline-block;
} 

这里我们使用了CSS中的ol和li选择器来选中有序列表和列表项。把它们的display属性设为inline-block之后，便可以水平排列。
方法二：使用float属性
除了使用display属性之外，我们还可以使用float属性来进行水平排列。我们可以给列表项设置float属性，让它们像浮动元素一样排列，实现水平排列的效果。

ol li {
  float: left;
} 

这里我们同样使用了CSS中的ol和li选择器来选中有序列表和列表项。把它们的float属性设为left之后，便可以水平排列。
总结
以上就是两种常见的把HTML中的有序列表水平排列的方法。我们可以根据具体情况来选择使用哪种方法。如果想让其它网友更好地理解这个过程，可以使用

代码块

来展示CSS代码。