使用 float 可实现列表项横向排列，通过设置 li 元素 float: left 使其脱离文档流并左对齐，配合清除默认样式、添加间距及父容器 overflow: hidden 防止塌陷，适用于兼容性要求高的场景。
使用 CSS 的 float 属性可以让列表项横向排列，虽然现在更推荐使用 Flexbox 或 Grid 布局，但在一些兼容性要求较高的场景中，float 依然有其实用价值。
基本原理
通过将每个列表项设置为浮动元素，它们会脱离正常文档流并尽可能向指定方向靠拢，从而实现横向排列效果。
HTML 结构
- 项目一
- 项目二
- 项目三
- 项目四
CSS 样式设置
给 li 元素添加 float: left，并清除默认样式和间距：
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
.inline-list li { float: left; padding: 10px; margin-right: 10px; background-color: #eee; }
关键点说明
- 清除默认样式：移除 ul 的默认 padding 和 margin，避免布局错位。
- 设置 float:left：让每个列表项向左浮动并排显示。
-
防止容器塌陷：父元素设置
overflow: hidden或使用清除浮动（clear）来包含浮动子元素。 - 控制间距：使用 margin 或 padding 调整项之间的距离。
基本上就这些。用 float 实现横向列表简单直接，但要注意浮动带来的布局影响，记得处理容器高度问题。
立即学习“前端免费学习笔记（深入）”；
