如何使复选框标签中的拆分文本垂直对齐？答案

【问题标题】：how can I make split text in a checkbox label align vertically?如何使复选框标签中的拆分文本垂直对齐？
【发布时间】：2017-09-21 09:37:58
【问题描述】：

为含糊的标题道歉，但这很难描述。我正在使用 span 标签在复选框标签中的文本之间放置空格，但我希望文本的两个部分垂直排列。本质上我想要第二个空格标签。下面的 sn-p 正确地将蓝色文本显示为左对齐。但我也希望红色文本左对齐。你可以看到它现在有点锯齿状。有人知道怎么做吗？

.LHLabelClass {

  display: inline-block;
color: blue;
margin-left: 10px;  
margin-right: 35px;
}

.RHLabelClass {
color: red;
}

<label><input type="checkbox" name="checkbox" id="First" />
<span class="LHLabelClass">First LH label:</span><span class="RHLabelClass">First RH label</span></label>
<br>

<label><input type="checkbox" name="checkbox" id="Second"/>
<span class="LHLabelClass">Second LH label:</span><span class="RHLabelClass">Second RH label</span></label>
<br>

<label><input type="checkbox" name="checkbox" id="Third"/>
<span class="LHLabelClass">Third LH label:</span><span class="RHLabelClass">Third RH label</span></label>

【问题讨论】：

类似的东西？ jsfiddle.net/6c6mjg1j/1

标签： html css checkbox alignment

【解决方案1】：

这是我使用inline-block 的解决方案：

*{box-sizing: border-box;}

.LHLabelClass {
  color: blue;
  margin-left: 10px;  
  margin-right: 35px;
  width: 120px;
  display: inline-block;
}

.RHLabelClass {
  color: red;
  width: 120px;
  display: inline-block;
}

<label>
  <input type="checkbox" name="checkbox" id="First" />
  <span class="LHLabelClass">First LH label:</span>
  <span class="RHLabelClass">First RH label</span>
</label>
<br>
<label>
  <input type="checkbox" name="checkbox" id="Second" />
  <span class="LHLabelClass">Second LH label:</span>
  <span class="RHLabelClass">Second RH label</span>
</label>
<br>
<label>
  <input type="checkbox" name="checkbox" id="Third" />
  <span class="LHLabelClass">Third LH label:</span>
  <span class="RHLabelClass">Third RH label</span>
</label>

【讨论】：

Chemata 一个非常优雅的解决方案，我从来没有想过！所有其他的也可以，但我会接受你的简单。我会投票给 chazsolo，但我认为代码需要首先明确。非常感谢大家。

【解决方案2】：

如果flexbox 是一个选项，您可以将labels 设为具有设置宽度 的flexbox，然后将flex: 1 添加到spans - 请参见下面的演示：

.LHLabelClass {
  display: inline-block;
  color: blue;
  margin-left: 10px;
  margin-right: 35px;
}
.RHLabelClass {
  color: red;
}
label {
  display: flex;
  width: 300px;
}
label > * {
  flex: 1;
}
label > input[type=checkbox] {
  flex: initial;
}

<label>
  <input type="checkbox" name="checkbox" id="First" />
  <span class="LHLabelClass">First LH label:</span><span class="RHLabelClass">First RH label</span>
</label>
<br>

<label>
  <input type="checkbox" name="checkbox" id="Second" />
  <span class="LHLabelClass">Second LH label:</span><span class="RHLabelClass">Second RH label</span>
</label>
<br>

<label>
  <input type="checkbox" name="checkbox" id="Third" />
  <span class="LHLabelClass">Third LH label:</span><span class="RHLabelClass">Third RH label</span>
</label>

【讨论】：

【解决方案3】：

您只需要在 div 中添加一些对齐类，并控制文本的对齐方式：

.LHLabelClass {
color: blue;
}

.RHLabelClass {
color: red;
margin-left: 10px;  
}

.col {
    float: left;
    width: 150px;
}

.left {
    text-align: left;
}

<div class="col left">
  <input type="checkbox" name="checkbox" id="First" />
  <span class="LHLabelClass">
    First LH label:
  </span>
  <br>
  <input type="checkbox" name="checkbox" id="Second"/>
  <span class="LHLabelClass">
    Second LH label:
  </span>
  <br>
  <input type="checkbox" name="checkbox" id="Third"/>
  <span class="LHLabelClass">
    Third LH label:
  </span>
</div>

<div class="col left">
  <span class="RHLabelClass">First RH label</span>
  <br>
  <span class="RHLabelClass">Second RH label</span>
  <br>
  <span class="RHLabelClass">Third RH label</span>
</div>

【讨论】：