使用 float 可实现列表项横向排列，通过设置 li 元素 float: left 使其脱离文档流并左对齐，配合清除默认样式、添加间距及父容器 overflow: hidden 防止塌陷，适用于兼容性要求高的场景。
使用 CSS 的 float 属性可以让列表项横向排列，虽然现在更推荐使用 Flexbox 或 Grid 布局，但在一些兼容性要求较高的场景中，float 依然有其实用价值。
通过将每个列表项设置为浮动元素，它们会脱离正常文档流并尽可能向指定方向靠拢，从而实现横向排列效果。
给 li 元素添加 float: left，并清除默认样式和间距：
.inline-list li { float: left; padding: 10px; margin-right: 10px; background-color: #eee; }
overflow: hidden 或使用清除浮动（clear）来包含浮动子元素。基本上就这些。用 float 实现横向列表简单直接，但要注意浮动带来的布局影响，记得处理容器高度问题。
立即学习“前端免费学习笔记（深入）”；
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
631
收藏
