Как сделать разделительный текст в метке флажка выровнен по вертикали?

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 S в flexbox с набор ширина, а затем добавить flex: 1 к span с - см демо ниже:

.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

Вам просто нужно добавить некоторые классы выравнивания ваших дивы, и контролировать то, как выравнивается текст:

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