如何强制列表项<li>始终保持在同一水平行不换行？

当然有办法啦！我来给你分享几个实用的CSS方案，轻松让你的列表项始终保持在同一水平线上，哪怕浏览器窗口缩得再小也不会换行~

方法一：使用Flexbox（最推荐，现代浏览器友好） #

这是目前最简洁高效的方案，现代浏览器都支持，代码逻辑也清晰。只需要给父元素<ul>设置flex布局，再明确指定不换行即可：

/* 给父列表设置flex布局 */
ul {
  display: flex;
  flex-wrap: nowrap; /* 关键属性：强制列表项不换行 */
  padding: 0; /* 移除默认的内边距，可选优化 */
  list-style: none; /* 移除默认的圆点标记，可选优化 */
}

/* 给列表项添加间距，避免挤在一起 */
ul li {
  margin-right: 20px;
}

设置完成后，不管浏览器宽度怎么缩小，<li>都会牢牢保持在同一行；如果内容总宽度超过容器，会自动出现横向滚动条，绝不会换行成竖列。

方法二：使用inline-block（兼容旧浏览器） #

如果需要兼容旧版浏览器（比如IE8+），可以用这个方案。核心是让列表项变成行内块元素，再通过父元素的属性阻止换行：

ul {
  white-space: nowrap; /* 关键属性：强制内部元素不换行 */
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block; /* 将列表项转为行内块元素 */
  margin-right: 20px;
}

这个方法的原理是让<li>拥有块元素的特性，但又能像行内元素一样排列，再配合父元素的white-space: nowrap彻底阻止换行。

根据你的实际场景选一个方案就行啦，Flexbox是现在的首选，代码更简洁也更灵活~

内容来源于stack exchange