inline和flex布局实现水平排列

• inline：适合纯文本流场景，不能设 width、height、margin-top/bottom
• inline-block：能设宽高和上下 margin，但默认有文字基线对齐带来的“缝隙”，可加 vertical-align: top 或父容器设 font-size: 0 消除
• 别忘了重置子元素的 margin 和 float，浮动元素不参与行内布局计算

用 flex 布局一劳永逸地横向排列

现代项目首选 display: flex，父容器设了它，子元素默认就横着排，且天然支持对齐、换行、等比伸缩等需求。兼容性上，IE10+ 支持，移动端完全没问题。

使用场景：按钮组、导航栏、表单控件水平对齐、响应式卡片行等。

• 父容器加 display: flex，子元素自动变成 flex item，无需额外样式
• 加 flex-wrap: nowrap（默认值）确保不换行；若内容超宽，可用 overflow-x: auto 横向滚动
• 避免在子元素上滥用 float 或 display: block，会破坏 flex 行为
• IE10/11 对 flex: 1 解析有差异，建议用具体数值如 flex: 1 1 0

为什么 float: left 现在不推荐了

float 曾是“让元素排成一行”的老办法，但它本质是为图文环绕设计的，强行用于布局会带来清除浮动、高度塌陷、响应式失效等问题。现在只要不是要兼容 IE9 及更早版本，就该避开它。

典型错误现象：父容器高度为 0，后面的内容叠上来；媒体查询里 float 切换方向后没重置，导致错位。

• float 元素脱离文档流，父容器无法感知其高度，必须用 clearfix 或 overflow: hidden 补救
• 响应式断点中，从横排切到竖排时，float 很难干净撤回，容易残留布局污染
• 与 position: absolute 或 transform 混用时，渲染行为不可预测

注意空格、换行符和字体大小带来的“看不见的间隙”

用 inline 或 inline-block 时，HTML 源码里的换行和空格会被浏览器渲染成一个空格字符，导致元素间出现约 4px 的间隙。这不是 bug，是规范行为。

这个间隙在小图标、按钮组、评分星星等紧凑场景里特别碍眼。

• 解决方法之一：父容器设 font-size: 0，子元素再单独设所需字号
• 方法之二：HTML 中删掉元素间的换行和空格（代码可读性受损，慎用）
• 方法之三：子元素设 margin-left: -4px（不推荐，依赖固定像素，缩放或字体变化时失效）
• Flex 布局完全不受此影响，这也是它更可靠的原因之一

真正麻烦的不是“怎么排成一行”，而是“排成一行后，在不同字体、缩放、输入法、甚至 Safari 的 text-rendering 设置下，是否还稳得住”。越靠近 UI 边界，越要验证真实设备上的像素级表现。

以上就是《inline和flex布局实现水平排列》的详细内容，更多关于的资料请关注golang学习网公众号！