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

Question

为模糊的标题表示歉意，但这很难描述。 我正在使用span标签在复选框标签中的文本之间放置空格，但是我希望文本的两个部分都垂直对齐。 本质上，我想要第二个空格标签。 下面的代码段正确地将蓝色文本显示为左对齐。 但是我也希望红色文本保持对齐。 您可以看到它现在有点锯齿。 有谁知道如何做到这一点？

 .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> 

Answer 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> 

Answer 2

如果可以使用flexbox则可以将label 设置为具有一定宽度的 flexbox ，然后将flex: 1添加到span s-请参见下面的演示：

 .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> 

Answer 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>