css ul li 横向排列

作者：哥伤不起发布日期:2026-01-07 浏览:13

/* CSS 样式 */
ul {
  list-style-type: none; /* 移除默认的列表项符号 */
  padding: 0;
  margin: 0;
  display: flex; /* 使用 Flexbox 布局 */
}

li {
  margin-right: 10px; /* 设置每个列表项之间的间距 */
}

/* 如果需要让列表项水平居中，可以添加以下样式 */
ul {
  justify-content: center; /* 水平居中 */
}

<!-- HTML 结构 -->
<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ul>

解释说明：

ul 元素使用了 display: flex;，这使得它的子元素（即 li）会横向排列。
list-style-type: none; 用于移除默认的列表项符号（如圆点、数字等）。
margin-right: 10px; 为每个 li 元素之间添加了一些间距，最后一个元素的右边距不会显示，因为它是最后一个元素。
如果你需要让整个 ul 在其容器内水平居中，可以使用 justify-content: center;。

这样就可以实现 ul li 的横向排列效果。

上一篇：css important的用法

下一篇：css平行四边形