最推荐用flexbox实现横向并列，语义清晰、响应式友好；grid适合固定列数的复杂布局；inline-block轻量但需处理间隙；float已过时，仅用于兼容旧项目。
用 display: inline-block 实现元素横向并列
这是最轻量、兼容性最好的方式，适合按钮、标签、小图标等短内容。关键点在于清除默认的行内元素间隙——那看似是空格或换行符造成的 4px 左右空白，实际是字体基线对齐导致的。
- 给子元素设
vertical-align: top或middle，避免基线错位 - 父容器设
font-size: 0，子元素再单独设字体大小（治标） - 或者直接删 HTML 中元素间的换行与空格（治本，但可读性差）
- 注意：
width必须显式设置，否则inline-block元素会“包裹内容”，无法均分空间
.container {
font-size: 0;
}
.item {
display: inline-block;
vertical-align: top;
font-size: 14px;
width: 120px;
}
用 float 布局并列（慎用）
虽然老派，但仍有遗留项目在用。它不依赖文档流，容易造成父容器塌陷，且响应式处理成本高。
- 必须给父容器加
overflow: hidden或伪元素清除浮动（::after { content: ""; display: table; clear: both; }） -
float元素脱离文档流，后续兄弟元素可能上浮覆盖，需额外控制margin或clear - 移动端适配困难：
float无法自动换行，要靠媒体查询手动改float: none+width: 100% - 现代项目中，除非维护 IE8–9，否则不建议新写
float
用 flexbox 做可靠横向布局
目前最推荐的方式，语义清晰、控制力强、响应式友好。父容器设 display: flex 即可启动，无需担心空白或塌陷问题。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 横向排列默认就是
flex-direction: row，不用额外写 - 用
justify-content控制主轴对齐：space-between、center、flex-start等 - 用
gap替代margin控制间距，更干净（IE 不支持，需降级用margin） - 子项宽度可用
flex: 1均分，或flex: 0 0 200px固定宽度不伸缩
.container {
display: flex;
gap: 12px;
justify-content: flex-start;
}
.item {
flex: 0 0 150px;
}
用 grid 布局实现精确并列
适合需要列数固定、间距统一、或有复杂对齐需求的场景，比如卡片网格、表单字段组。比 flex 更擅长二维控制，但简单横向排列略显“重”。
立即学习“前端免费学习笔记（深入）”；
- 设
display: grid后，用grid-template-columns明确列宽，如repeat(4, 1fr)或200px 1fr auto -
gap同样生效，且同时控制行与列间距 - 单个子元素可用
grid-column跨列，灵活性高于flex - 注意：IE11 支持
grid但语法不同（-ms-grid），若需兼容，建议用flex降级
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
真实项目里，flex 是横向并列的默认选择；grid 适合结构明确的多列场景；inline-block 只用于极简、低交互的静态模块；而 float 基本只出现在调试旧代码时。别忘了检查 box-sizing —— 很多“并列后溢出”的问题，其实只是 padding 和 border 没算进 width。 
