如何实现复选框（checkbox）与文本的 inline 布局？

当然可以实现！其实复选框和文本的inline布局是很常见的需求，你之前没成功大概率是结构没写对或者CSS的方向错了，我给你两种最靠谱的方案：

方法1：利用HTML原生<label>标签关联（最推荐） #

这种方法不仅能实现inline布局，还自带“点击文本勾选复选框”的交互，同时符合语义化标准，完全不需要额外CSS就能生效。

有两种写法：

• 把复选框和文本直接包裹在<label>内部：

<label>
  <input type="checkbox" name="fruit" value="apple">
  苹果
</label>
<label>
  <input type="checkbox" name="fruit" value="banana">
  香蕉
</label>

• 用for属性关联复选框的id（适合需要将复选框和文本分开布局的场景）：

<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">橙子</label>

这两种写法下，复选框和文本默认就是inline排列的，完全不用额外设置CSS。

方法2：CSS强制inline布局（解决结构导致的块级问题） #

如果你的复选框和文本被块级元素（比如<div>）包裹，或者元素默认是块级显示的，就需要用CSS调整它们的display属性：

先写HTML结构：

<div class="checkbox-group">
  <input type="checkbox" name="hobby" value="reading">
  <span>阅读</span>
</div>
<div class="checkbox-group">
  <input type="checkbox" name="hobby" value="running">
  <span>跑步</span>
</div>

然后添加CSS：

.checkbox-group input,
.checkbox-group span {
  display: inline-block; /* 用inline-block比inline更灵活，能控制间距 */
  vertical-align: middle; /* 解决复选框和文本垂直错位的问题 */
  margin-right: 8px; /* 可选：给复选框和文本之间加个间距 */
}

常见踩坑点提醒 #

• 不要给复选框或文本设置display: block，这会让它们独占一行；
• 用vertical-align: middle能避免复选框和文本垂直对齐不一致的问题；
• 尽量不要用float来实现inline布局，容易引发后续的 clearfix 或布局塌陷问题。

内容的提问来源于stack exchange，提问作者Rigden Aunapuu