如何将 li 带到同一行

在网页中，经常需要将多个 li 元素（列表项）排列在同一行中。这时，我们可以使用以下几种方法实现：

1. 使用 display: inline 或者 display: inline-block

如果 li 元素的父元素是块级元素（如 div），那么通过设置 li 的 display 样式为 inline 或者 inline-block，就可以实现多个 li 元素排在同一行中的效果。

ul li {
  display: inline; /* 或者 display: inline-block */
}

2. 使用 float

另一种实现方式是将 li 设置为浮动元素，这样它们就会排列在同一行，不过需要注意的是，必须清除浮动才能保证布局的稳定性。

ul li {
  float: left;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

3. 使用 flexbox

最后，我们还可以使用 flexbox 实现多个 li 元素在同一行的排列。需要将 ul 元素的 display 样式设置为 flex，再设置 li 元素的 flex 属性，即可实现灵活的布局效果。

ul {
  display: flex;
}
ul li {
  flex: 1;
}

以上三种方式，各有优缺点，可以根据具体情况选择使用。