最稳妥的横向列表用 display: inline-block，需重置 ul 的 margin/padding、设 font-size: 0 消除空白间隙、li 单独设字号并加 vertical-align: top 对齐。
用 display: inline-block 实现横向列表最稳妥
多数人一上来就用 float: left，结果清浮动、父容器塌陷、换行错位全来了。inline-block 是更干净的起点，兼容性好（IE8+），行为可预测。
关键点：
-
li元素默认有换行符产生的空白间隙，会导致横向排列时出现 4px 左右的空隙 —— 必须设font-size: 0在ul上，再单独给li设回正常字号 -
vertical-align: top加在li上，避免文字基线对齐导致高度不齐 - 别忘了重置
ul的margin和padding，否则左右/顶部会多出默认边距
- 首页
- 关于
- 联系
Flex 布局是现代首选，但要注意老浏览器 fallback
如果项目不需要支持 IE9 及以下，display: flex 是最直观的方案，不用操心空白间隙、垂直对齐或清除浮动。
常见踩坑：
-
ul设display: flex后，li默认是flex-item，但若内部有a标签没设display: block，点击热区会变小 - 用
justify-content: space-between时，首尾项贴边、中间均分 —— 如果想等间距（包括首尾外边距），得用space-around或手动加padding - Flex 容器的
flex-wrap: wrap默认不换行，窄屏下内容溢出容易被忽略
用 display: flex 配合 nav 语义化更安全
横向列表常用于导航，直接用 nav + ul 是标准做法，比纯 div 更利于可访问性和 SEO。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 把
display: flex写在nav或ul上都可以，但推荐写在ul上，保持nav仅作语义包裹 - 为键盘用户保留
tabindex和焦点样式，尤其当li内是a时，a:focus必须可见（比如加outline或背景色） - 移动端响应式中，横向列表常需折叠为汉堡菜单 —— 此时不要靠 JS 动态删 DOM，而是用
display: none/flex切换，保持结构稳定
横向列表撑不满容器？检查盒模型和 white-space
经常遇到“明明写了 width: 100%，但列表只占一半” —— 多半不是宽度问题，而是内容或布局干扰。
排查顺序：
- 父容器是否设置了
width或max-width？ul默认是块级，但宽度取决于内容，不是自动撑满 -
li是否有margin或padding累加后超出容器？用浏览器开发者工具看 computed styles 最直接 - 文本过长未折行：
white-space: nowrap常被误加，导致横向滚动或溢出；需要换行时得配word-break: break-word - 字体加载失败或 fallback 字体宽度差异大，也可能让整体宽度不稳定
复杂点往往藏在细节里：一个没闭合的标签、一行看不见的空格、CSS 优先级覆盖、甚至字体度量差异，都可能让横向排列偏移几像素。调试时优先看渲染后的盒模型，而不是只盯代码逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
