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

Question

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

＆＃13;

＆＃13;

.LHLabelClass {

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

.RHLabelClass {
color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如果router.use(express.static(path.join(__dirname, '../public'))); router.get('/upload/', (req, res) => { //Access OK res.render('admin/upload'); }); router.get('/album/:albumid', (req, res) => { //No access res.render('admin/album'); }): 是一个选项，您可以使用设置的宽度制作flexbox sa label，然后将flexbox添加到flex: 1 1}} s - 见下面的演示：

＆＃13;

＆＃13;

span

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>