CSS li 水平排列

在本文中，我们将介绍如何使用 CSS 中的列表项 li 进行水平排列。

阅读更多：CSS 教程

基础知识

在 CSS 中，将列表项 li 水平排列有几种实现方法：使用 float、display 和 flexbox。下面我们将对这些方法进行详细介绍。

Float

浮动使元素脱离文档流，并在容器中靠左或靠右浮动。使用 float 时，需要注意以下几点：

父容器需要设置为非 static 的定位（如 relative、absolute、fixed）。
列表项需要设置宽度，否则宽度将默认为容器宽度，可能导致排列不正常。
要想防止元素下方出现一片空白，需要在父容器末尾增加一个空的元素并设置 clear:both。

下面是一个使用 float 使 li 水平排列的示例代码：

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

ul {
  position: relative; /* 确保父容器非 static 定位 */
}

li {
  float: left;
  width: 100px; /* 列表项需要设置宽度 */
}

.clear{
  clear: both;
}

Display

另一个将 li 水平排列的方法是使用 display 属性。设置 li 的 display 为 inline 或 inline-block，就可以将它们水平排列。需要注意的是：设置为 inline 会使它们无法设置宽度，从而导致样式混乱；设置为 inline-block 还需要注意垂直对齐。

下面是一个使用 display 使 li 水平排列的示例代码：

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

ul {
  font-size: 0; /* 去除 li 间多余的空格 */
  text-align: center; /* 设置 li 水平居中 */
}

li {
  display: inline-block;
  width: 100px; /* 设置 li 的宽度 */
  font-size: 16px; /* 这里需要重新设置字体大小 */
  vertical-align: top; /* 设置 li 垂直对齐方式 */
}

Flexbox

Flexbox 是一种弹性盒模型，在 CSS3 中出现，主要用于容器内的布局。使用 Flexbox 可以非常方便地实现水平、垂直居中、按比例分配空间等功能，是目前最常用的布局方式之一。

使用 Flexbox 时，只需将父容器的 display 属性设置为 flex 和 flex-direction：row，就可以将 li 水平排列。如果需要居中或其他操作，可以通过设置不同的样式来实现。

下面是一个使用 Flexbox 使 li 水平排列的示例代码：

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

ul {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 设置 li 水平居中 */
  align-items: center; /* 设置 li 垂直居中 */
}

li {
  flex: 1; /* 设置 li 按比例分配空间 */
}