如何用CSS实现列表项单行横向排列？

嗨，这个需求太常见啦，我给你列几个最常用、最好用的简单CSS方案：

方法一：用inline-block（经典兼容方案） #

默认情况下，<li>是块级元素，会独占一行。我们只需要把它改成inline-block，就能让列表项在同一行排列，还能保留块级元素的padding、margin等特性：

/* 给列表项设置横向排列 */
ul li {
  display: inline-block;
  list-style: none; /* 可选：移除默认的圆点标记 */
}
/* 移除ul默认的左内边距，避免多余空白 */
ul {
  padding-left: 0;
}

⚠️ 小提示：inline-block元素之间可能会出现微小的空隙，如果在意这个，可以给父元素ul设置font-size: 0;，再给li恢复你需要的字体大小（比如font-size: 16px;）。

方法二：用Flex布局（现代首选方案） #

这是现在最推荐的方法，兼容性好（支持几乎所有现代浏览器），还能轻松控制对齐、间距等：
只需要给父元素<ul>设置display: flex;，子元素会自动横向排列，完全不用管空隙问题：

ul {
  display: flex;
  list-style: none; /* 可选：移除圆点 */
  padding-left: 0; /* 移除默认左内边距 */
  gap: 12px; /* 可选：设置列表项之间的间距，比手动加margin更方便 */
  /* 可选：控制整体对齐，比如居中对齐用 justify-content: center; */
}

这个方法的优势是灵活性拉满，想调整对齐方式、换行规则都能通过Flex的属性轻松实现，非常适合现代网页开发。

方法三：用float（老旧方案，不推荐） #

这是比较早期的实现方式，现在一般不用了，不过可以作为知识了解：

ul li {
  float: left;
  list-style: none;
}
/* 必须给ul清除浮动，否则会影响后续布局 */
ul {
  overflow: hidden;
  padding-left: 0;
}

这个方法容易引发布局塌陷的问题，所以优先考虑前面两种方案。

总结一下：新项目直接用Flex布局就好，简单又强大；如果需要兼容极老的浏览器（比如IE8），再考虑inline-block方案~

内容来源于stack exchange