如何使用HTML/CSS实现条款复选框旁段落文本两端对齐

现有代码失效原因 #

你写的代码无法达到预期效果，核心问题有3个：

• text-align: justify 两端对齐属性仅对块级元素生效，你给label设置了display: inline行内属性，对齐规则不会触发
• HTML结构存在语法错误：<p>标签不允许嵌套其他块级元素（包括另一个<p>），浏览器会自动修正错误嵌套，打乱原有布局
• 用float做这类对齐布局可控性差，文本换行后会直接顶到复选框下方，无法实现和首行文本对齐的效果

推荐实现方式 #

用Flex布局实现最简便，不需要复杂计算，兼容性覆盖所有主流浏览器，能同时实现复选框固定位置、文本两端对齐、换行自动缩进对齐的效果。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.terms-row {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* 复选框和文本的间距，可自行调整数值 */
  margin-top: 2em;
  font-size: 12px;
}

.terms-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0;
}

.terms-row label {
  display: block;
  flex: 1;
  text-align: justify;
  text-justify: inter-word;
}

.normal-paragraph {
  margin-top: 2em;
  font-size: 12px;
  text-align: justify;
}
</style>
</head>
<body>
  <div class="terms-row">
    <input type="checkbox" id="agree" />
    <label for="agree">
      I declare that I have been provided with documents by Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint est adipisci, earum ratione tempora rerum?
    </label>
  </div>

  <p class="normal-paragraph">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint est adipisci, earum ratione tempora rerum?
  </p>
</body>
</html>

代码说明 #

• 用flex布局把复选框和文本放在同一行，复选框设置flex-shrink:0不会被文本挤压变形
• 文本容器设置flex:1占满复选框之外的所有宽度，设置块级属性后两端对齐规则正常生效
• 去掉了错误的p标签嵌套，避免浏览器解析布局错乱
• 文本换行后会自动和首行文本左侧对齐，不会跑到复选框下方

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