如何让<li>元素的内容在同一行显示？

你的overflow-x: auto属性未生效是缺少强制内容不换行的配置，默认状态下元素内容超出宽度会自动折行，按以下代码配置即可实现需求：

HTML 结构示例 #

<ul class="single-line-list">
  <li>Blender</li>
  <li>Adobe After Effects</li>
  <li>Hitfilm Pro</li>
  <li>Adobe Premiere Pro</li>
</ul>

对应 CSS 配置 #

.single-line-list {
  /* 启用弹性布局让列表项横向排列 */
  display: flex;
  gap: 12px; /* 自定义列表项之间的间距 */
  max-width: 100%; /* 可替换为你需要的固定宽度值，比如500px */
  overflow-x: auto;
  /* 清除列表默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.single-line-list li {
  /* 强制列表项内容不换行 */
  white-space: nowrap;
}

配置完成后所有列表项会在同一行横向排列，内容超出容器最大宽度时会自动出现横向滚动条，不会自动折行。

内容的提问来源于stack exchange，提问作者KAVIDHASAN M