如何在行中对齐 li

如果你曾经在编写 HTML 代码时尝试过将多个 <li> 元素水平对齐在同一行，你就知道这并不是一件容易的事情。不过，通过一些技巧和 CSS 属性，我们可以达到让多个 <li> 元素完美对齐的目的。下面将介绍实现方法。

方法1：使用 display: inline-block

首先，我们可以使用 display: inline-block 属性将多个 <li> 元素变成行内块级元素，从而让它们在同一行显示。代码如下：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 10px;
  /* 对于最后一个元素不需要右边距 */
}

li:last-child {
  margin-right: 0;
}

这里，我们给 <li> 元素设置了 display: inline-block 属性，让它们在同一行内以块级元素的形式显示。这时需要注意以下两点：

• 设置了 display: inline-block 的元素会有 默认的行高 和 默认的 文字基线（baseline），需要通过调整其 padding 和 line-height 属性来居中文本。
• 由于设置了 display: inline-block 的元素之间的空格和换行符会被解析为一个空格，因此在 HTML 代码中将多个 <li> 元素写在同一行内，或者在 <ul> 元素和 <li> 元素之间没有空格和换行符。

方法2：使用 Flexbox 布局

另一种实现多个 <li> 元素水平对齐的方法是使用 Flexbox 布局。通过在 <ul> 元素上设置 display: flex 属性，我们可以让其内部的 <li> 元素在同一行内水平对齐。代码如下：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  /* 默认设置为 flex-direction: row */
  justify-content: space-between;
  /* 居中方式可以是 space-between, space-around, center 等 */
}

在上述代码中，我们通过在 <ul> 元素上设置了 display: flex 属性，将其内部的 <li> 元素设为 Flex 子元素，并且使用了 justify-content 属性将子元素水平对齐。

需要注意的是，使用 Flexbox 布局可能存在浏览器兼容性问题，在实际使用中需要考虑到。

结论

通过以上两种方法，我们可以让多个 <li> 元素在同一行内水平对齐。具体采用哪种方法需要根据实际情况来决定。在实际项目中，可以根据元素的父子关系，以及页面效果等因素来选择使用哪种方法。