本文介绍如何通过 CSS 将 <li> 元素设置为内联流式布局，使其内容（包括嵌套的 <h2>）像普通文本一样连续排列、自动换行，避免每个列表项独占一行。核心在于正确使用 display: inline 替代 inline-block。
本文介绍如何通过 css 将 `
`）像普通文本一样连续排列、自动换行，避免每个列表项独占一行。核心在于正确使用 `display: inline` 替代 `inline-block`。
在默认语义中，<ul> 和 <li> 是块级列表结构，每个 <li> 天然独占一行；但有时我们需要更灵活的排版效果——例如将多个短标题或标签以“类段落”的方式水平流动排列，并在容器宽度不足时自然折行，类似英文中逗号分隔的并列短语。这种需求常见于标签云、导航摘要、响应式信息栏等场景。
实现的关键在于打破列表项的块级行为，将其转化为真正的内联元素。原方案中使用 display: inline-block 会导致每个 <li> 保持独立盒模型（即使内容短，也无法与其他 li 在同一行内“粘连”换行），且 inline-block 元素间的空白符（如换行、空格）会被渲染为实际间距，难以精确控制。
✅ 正确做法是：
- 将 <li> 和其内部的 <h2> 均设为 display: inline；
- 利用 li::after 插入不间断空格（\00a0）作为分隔符，确保视觉间距可控且不随 HTML 缩进变化；
- 保留 word-wrap: break-word（或现代推荐的 overflow-wrap: break-word）以支持长文本在窄容器中安全折行。
以下是完整、可直接运行的示例代码：
立即学习“前端免费学习笔记（深入）”；
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none; /* 移除默认圆点，避免干扰 */
}
li,
h2 {
display: inline;
word-wrap: break-word;
overflow-wrap: break-word; /* 更现代的等效属性 */
margin: 0;
padding: 0;
}
li::after {
content: '\00a0'; /* 不间断空格，比普通空格更可靠 */
}<ul> <li><h2>Hello!</h2></li> <li><h2>How are you?</h2></li> <li><h2>Today?</h2></li> <li><h2>This has to be a really long line to show you what I mean, so although I tried to be brief, it turned into a longer discussion.</h2></li> </ul>
? 注意事项与优化建议：
- 语义权衡：此方案牺牲了 <ul>/<li> 的语义完整性（因视觉上已非“列表”），若 SEO 或无障碍访问（a11y）要求高，建议配合 aria-label 或改用 <div> + role="list"/role="listitem" 显式声明语义。
- 样式继承：<h2> 默认有外边距和加粗，务必重置 margin、font-weight 等，否则会影响内联对齐；也可考虑用 <span> 替代 <h2> 以避免语义冲突。
-
响应式增强：可在小屏下添加媒体查询，临时切回 display: block 保证可读性，例如：
@media (max-width: 480px) { li, h2 { display: block; } li::after { content: ""; } } - 替代方案参考：CSS Grid 或 Flexbox 亦可实现类似效果（如 ul { display: flex; flex-wrap: wrap; } + li { flex: 0 1 auto; }），但需额外处理换行逻辑与间距，而 inline 方案更轻量、兼容性更好（支持 IE9+）。
掌握这一技巧，你就能在保持简洁 HTML 结构的同时，获得媲美自然段落的流式文本布局能力。
