如何用CSS实现带文本的复选框横向排列？

要让这两个带文本的复选框横向并排而非上下堆叠，只需通过CSS调整布局即可，以下是两种实用方案：

方案1：Flexbox布局（推荐） #

Flex是现代布局方案，能轻松实现横向排列，还可便捷控制间距与对齐方式：

.checkbox-wrapper-33 {
  display: flex;
  gap: 20px; /* 自定义两个复选框之间的间距 */
  align-items: center; /* 让复选框与文本垂直居中对齐 */
}

/* 移除p标签默认的外边距，避免额外间距 */
.checkbox__textwrapper {
  margin: 0;
}

方案2：行内块元素布局 #

若需兼容旧版浏览器，可使用inline-block实现：

.checkbox-wrapper-33 .checkbox {
  display: inline-block;
  margin-right: 20px; /* 控制复选框间距 */
}

.checkbox__textwrapper {
  margin: 0;
  display: inline-block; /* 确保文本与复选框在同一行 */
}

完整示例代码 #

<div class="checkbox-wrapper-33">
  <label class="checkbox">
    <input class="checkbox__trigger visuallyhidden" name="WAV" type="checkbox" checked />
    <span class="checkbox__symbol">
      <svg aria-hidden="true" class="icon-checkbox" width="28px" height="28px" viewBox="0 0 28 28" version="1" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 14l8 7L24 7"></path>
      </svg>
    </span>
    <p class="checkbox__textwrapper">WAV</p>
  </label>
  <label class="checkbox">
    <input class="checkbox__trigger visuallyhidden" name="MP3" type="checkbox" />
    <span class="checkbox__symbol">
      <svg aria-hidden="true" class="icon-checkbox" width="28px" height="28px" viewBox="0 0 28 28" version="1" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 14l8 7L24 7"></path>
      </svg>
    </span>
    <p class="checkbox__textwrapper">MP3</p>
  </label>
</div>

<style>
.checkbox-wrapper-33 {
  display: flex;
  gap: 20px;
  align-items: center;
}

.checkbox__textwrapper {
  margin: 0;
}

/* 隐藏原生复选框控件，保留自定义样式 */
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

说明 #

• Flex方案中，display: flex将容器内的label元素设置为横向排列，gap直接定义元素间间距，无需额外处理margin的兼容性问题；
• 移除checkbox__textwrapper的默认margin，避免文本周围出现不必要的空白；
• visuallyhidden类用于隐藏原生复选框，确保自定义的SVG复选框样式正常显示。

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