最推荐用flexbox实现横向并列，语义清晰、响应式友好；grid适合固定列数的复杂布局；inline-block轻量但需处理间隙；float已过时，仅用于兼容旧项目。
用
实现元素横向并列
这是最轻量、兼容性最好的方式，适合按钮、标签、小图标等短内容。关键点在于清除默认的行内元素间隙——那看似是空格或换行符造成的 4px 左右空白，实际是字体基线对齐导致的。
给子元素设
或
，避免基线错位
父容器设
，子元素再单独设字体大小（治标）
或者直接删 HTML 中元素间的换行与空格（治本，但可读性差）
注意：
必须显式设置，否则
元素会“包裹内容”，无法均分空间
用
布局并列（慎用）
虽然老派，但仍有遗留项目在用。它不依赖文档流，容易造成父容器塌陷，且响应式处理成本高。
必须给父容器加
或
伪元素
清除浮动
（
）
元素脱离文档流，后续兄弟元素可能上浮覆盖，需额外控制
或
移动端适配
困难：
无法自动换行，要靠媒体查询手动改
+
现代项目中，除非维护 IE8–9，否则不建议新写
用
做可靠横向布局
目前最推荐的方式，语义清晰、控制力强、响应式友好。父容器设
即可启动，无需担心空白或塌陷问题。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
横向
排列
默认就是
，不用额外写
用
控制主轴对齐：
、
、
等
用
替代
控制间距，更干净（IE 不支持，需降级用
）
子项宽度可用
均分，或
固定宽度不伸缩
用
布局实现精确并列
适合需要列数固定、间距统一、或有复杂对齐需求的场景，比如卡片网格、表单字段组。比
更擅长二维控制，但简单横向排列略显“重”。
立即学习
“
前端免费学习笔记（深入）
”；
设
后，用
明确列宽，如
或
同样生效，且同时控制行与列间距
单个子元素可用
跨列，灵活性高于
注意：IE11 支持
但语法不同（
），若需兼容，建议用
降级
真实项目里，
是横向并列的默认选择；
适合结构明确的多列场景；
只用于极简、低交互的静态模块；而
基本只出现在调试旧代码时。别忘了检查
—— 很多“并列后溢出”的问题，其实只是
和
没算进
。
display: inline-blockvertical-align: topmiddlefont-size: 0widthinline-block.container {
font-size: 0;
}
.item {
display: inline-block;
vertical-align: top;
font-size: 14px;
width: 120px;
}floatoverflow: hidden::after { content: ""; display: table; clear: both; }floatmarginclearfloatfloat: nonewidth: 100%floatflexboxdisplay: flexflex-direction: rowjustify-contentspace-betweencenterflex-startgapmarginmarginflex: 1flex: 0 0 200px.container {
display: flex;
gap: 12px;
justify-content: flex-start;
}
.item {
flex: 0 0 150px;
}gridflexdisplay: gridgrid-template-columnsrepeat(4, 1fr)200px 1fr autogapgrid-columnflexgrid-ms-gridflex.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}flexgridinline-blockfloatbox-sizingpaddingborderwidth