这是我的htm5代码。两个输入范围未正确对齐。如何正确对齐这2个元素?
<!DOCTYPE html>
<html lang="it">
<head>
<title>Ciao</title></head>
<body>
<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>
</label>
</fieldset>
</body>
</html>
答案 0 :(得分:5)
可能的解决方案是:
只需给出每个前面的标签和跨度宽度,或宽度足以适合最长文本的最小宽度。
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>
或者,如果您事先不知道要处理的宽度,请使用表¹。这样,整个结构将自行调整。
.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>
答案 1 :(得分:0)