無法對齊兩個html5輸入範圍

這是我的htm5代碼。兩個輸入範圍沒有正確對齊。我如何正確對齊這2個元素？無法對齊兩個html5輸入範圍

<!DOCTYPE html> 
 
<html lang="it"> 
 
<head> 
 
    <title>Ciao</title></head> 
 
<body> 
 
    <fieldset> 
 
    <legend>Your Indicators</legend> 
 
\t <label for="height">Height::</label> 
 
    <span>Short</span> 
 
    <input type="range" id="height" min="0" max="100" name="height" /> 
 
    <span>Tall</span><br> 
 
\t <label for="salary">Salary::</label> 
 
    <span>Poor</span> 
 
    <input type="range" id="salary" min="0" max="100" name="salary" /> 
 
    <span>Rich</span> 
 
    </label> 
 
    </fieldset> 
 
</body> 
 
</html>

來源

2015-10-17 Computerlucaworld

什麼是正確的，你要如何將它們對齊 – imGaurav

你想他們彼此之間，像[th是]（http://jsfiddle.net/MrLister/32o2r10p/）？ –

你想要什麼路線？ @ user3503186 – SHAZ

可能的解決方案是：

只需給每個前述標籤和跨度的寬度，或最小寬度，其足夠寬以適應最長文本。

label { 
 
    display: inline-block; 
 
    min-width: 4.5em 
 
} 
 
label + span { 
 
    display: inline-block; 
 
    min-width: 3em; 
 
    text-align: right 
 
} 
 
label, 
 
span, 
 
input[type='range'], 
 
br { 
 
    vertical-align: middle; 
 
    line-height: 1.6 
 
}

<fieldset> 
 
    <legend>Your Indicators</legend> 
 
    <label for="height">Height::</label><span>Short</span> 
 
    <input type="range" id="height" min="0" max="100" name="height" /><span>Tall</span> 
 
    <br/> 
 
    <label for="salary">Salary::</label><span>Poor</span> 
 
    <input type="range" id="salary" min="0" max="100" name="salary" /><span>Rich</span> 
 
</fieldset>

或者，如果你不預先知道寬度你會處理，使用table¹。這樣一來，整個結構將自行調整。

.grid {display:table} 
 
.row {display:table-row; vertical-align:middle} 
 
.col {display:table-cell; vertical-align:middle} 
 
.col:nth-of-type(2) {text-align:right; padding-left:.33em}

<fieldset> 
 
    <legend>Your Indicators</legend> 
 
    <div class="grid"> 
 
    <div class="row"> 
 
     <span class="col"><label for="height">Height::</label></span> 
 
     <span class="col">Short</span> 
 
     <span class="col"><input type="range" id="height" min="0" max="100" name="height" /></span> 
 
     <span class="col">Tall</span> 
 
    </div> 
 
    <div class="row"> 
 
     <span class="col"><label for="salary">Salary::</label></span> 
 
     <span class="col">Poor</span> 
 
     <span class="col"><input type="range" id="salary" min="0" max="100" name="salary" /></span> 
 
     <span class="col">Rich</span> 
 
    </div> 
 
    </div> 
 
</fieldset>

來源

2015-10-17 14:15:02

¹顯示一張表格，我的意思是一張CSS表格。不是HTML表格。嘆。 –

謝謝您的完整回覆！ – Computerlucaworld

應用vertical-align: middle的範圍內輸入：

input[type='range'] { 
    vertical-align: middle; 
}

結果在CodePen

來源

2018-01-24 14:30:09 inBlackAndWhite

無法對齊兩個html5輸入範圍

回答

相關問題