Flex 布局实现 li 元素水平排列 - 一行显示

使用 Flex 布局可以轻松地将 'li' 元素水平排列在一行上。你可以通过以下方式实现：

HTML 代码：

<ul class='flex-container'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS 代码：

.flex-container {
  display: flex;
  list-style: none; /* 去除 li 的默认样式 */
  padding: 0;
}

.flex-container li {
  flex: 1; /* 所有 li 元素平均分配父容器的宽度 */
  text-align: center;
}

在上述代码中，我们使用了一个具有 'display: flex;' 属性的容器来包裹 'li' 元素。这使得 'li' 元素成为一个 Flex 容器，并且它们会水平排列在一行上。

'flex: 1;' 属性将 'li' 元素的宽度设置为相等的比例，以便它们平均分配父容器的宽度。这样，无论 'li' 元素的数量如何，它们都会平均分布在一行上。

最后，我们设置了 '.flex-container li' 的 'text-align: center;' 属性来使 'li' 元素的内容居中对齐。你可以根据需要进行其他样式的调整。