有无序列表水平 CSS

在为网页设计排版时，无序列表可以用来显示一系列相关的项目，而水平列表则可以对这些项目进行横向排列。CSS可以帮助我们创建美观的有无序列表水平效果。

无序列表

无序列表使用ul标签来创建，每个列表项使用li标签。默认情况下，这些列表项会竖排排列。要将它们横排排列，我们需要使用CSS。

使用display属性

我们可以通过将列表项的display属性设置为inline-block或inline来实现横向排列。

Markdown代码片段：

ul {
  list-style: none;
}

li {
  display: inline-block;
  /* 或者使用 display: inline; */
  margin-right: 10px;
}

这样，每个列表项就会排列在一行上，它们之间的间距可以通过margin-right属性进行控制。

使用float属性

另一种常见的方法是使用float属性。我们可以将列表项float:left或float:right，并设置overflow:hidden来清除浮动。这样一来，列表项就会横向排列了。

Markdown代码片段：

ul {
  list-style: none;
  overflow: hidden;
}

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

有序列表

有序列表使用ol标签来创建，每个列表项仍使用li标签。和无序列表一样，我们可以使用CSS将有序列表项进行横向排列。

Markdown代码片段：

ol {
  list-style: none;
  counter-reset: li;
}

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

li:before {
  content: counter(li) ". ";
  counter-increment: li;
}

这段代码使用counter-reset和counter-increment属性来生成序号，在列表项前面添加。我们还使用display:inline-block和margin-right让列表项横向排列。

取消序号

如果不需要序号，可以使用以下的CSS代码：

Markdown代码片段：

ol {
  list-style: none;
}

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

li:before {
  content: none;
}

这样，列表项前面的序号就会被取消。