如何用CSS对齐文本与复选框，优化布局并添加右侧复选框？

一、CSS代码优化（更高效的实现方式） #

原写法存在大量重复的边框样式，我们可以通过CSS选择器复用和统一样式提取来简化代码，让结构更清晰、可维护性更强：

优化后的CSS代码 #

.main {
  border: 1px solid black;
  border-top: none; /* 由第一个子元素的顶部边框替代 */
  border-bottom: none; /* 由最后一个子元素的底部边框替代 */
  border-radius: 4px;
  overflow: hidden; /* 确保子元素的圆角不会被父元素边框遮挡 */
}

.main > div {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选，让内容垂直居中 */
  height: 50px;
  border-top: 1px solid black;
  padding: 0 10px; /* 可选，添加内边距避免内容贴边 */
}

.main > div:last-child {
  border-bottom: 1px solid black;
}

优化后的HTML代码 #

<div class='main'>
  <div>
       <div>Name</div>
        <div>Right</div>
  </div>
  <div>
       <div>Email</div>
        <div>Right</div>
  </div>
  <div>
       <div>Phone</div>
        <div>Right</div>
  </div>
  <div>
       <div>Extention</div>
        <div>Right</div>
  </div>
</div>

优化说明 #

• 父元素.main统一设置左右边框和圆角，通过overflow: hidden让子元素的上下边框与父元素圆角完美贴合，无需给每个子元素单独写左右边框；
• 用> div选择器给所有子元素统一设置flex布局、高度和顶部边框，减少重复代码；
• 仅通过:last-child给最后一个元素添加底部边框，HTML中无需额外标注first/second/last类，结构更简洁。

二、添加右侧复选框与嵌套flex布局说明 #

要在右侧添加两个复选框，嵌套flex布局是合理且高效的选择，能轻松实现复选框的横向排列。实现方式如下：

最终HTML代码（含复选框） #

<div class='main'>
  <div>
       <div>Name</div>
        <div class="checkbox-group">
          <label><input type="checkbox"> 选项1</label>
          <label><input type="checkbox"> 选项2</label>
        </div>
  </div>
  <div>
       <div>Email</div>
        <div class="checkbox-group">
          <label><input type="checkbox"> 选项1</label>
          <label><input type="checkbox"> 选项2</label>
        </div>
  </div>
  <div>
       <div>Phone</div>
        <div class="checkbox-group">
          <label><input type="checkbox"> 选项1</label>
          <label><input type="checkbox"> 选项2</label>
        </div>
  </div>
  <div>
       <div>Extention</div>
        <div class="checkbox-group">
          <label><input type="checkbox"> 选项1</label>
          <label><input type="checkbox"> 选项2</label>
        </div>
  </div>
</div>

补充CSS代码（复选框布局） #

.checkbox-group {
  display: flex;
  gap: 15px; /* 控制复选框之间的间距 */
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px; /* 复选框与文字的间距 */
}

嵌套flex的必要性说明 #

• 外层.main > div的flex布局负责左右内容分离；
• 右侧.checkbox-group的flex布局负责让复选框横向排列，通过gap控制间距，比浮动、inline-block更灵活易维护；
• 这种嵌套方式层级清晰，后续调整布局（比如新增复选框、修改间距）更方便，符合现代CSS布局的最佳实践。

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