如何使複選框標籤中的拆分文本垂直對齊？

道歉的模糊標題，但這很難形容。我使用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>

來源

2017-01-24 Silverburch

這樣的事情？ https://jsfiddle.net/6c6mjg1j/1/ – Aer0

這裏是我的解決方案與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>

來源

2017-01-24 18:06:47

Chemata一個非常優雅的解決方案，我永遠不會想到！所有其他人也工作，但我會接受你的簡單。我會投票支持chazsolo，但我認爲代碼需要首先明確。非常感謝大家。 – Silverburch

如果flexbox是一個選項可以使label是個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>

來源

2017-01-24 18:08:21 kukkuz

你只需要一些調整類添加到您的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>

來源

2017-01-24 18:21:12 W3AVE

如何使複選框標籤中的拆分文本垂直對齊？

回答

相關問題