Question

这是我的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>

Answer 1

可能的解决方案是：

只需给出每个前面的标签和跨度宽度，或宽度足以适合最长文本的最小宽度。

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>

Answer 2

将vertical-align: middle应用于范围输入：

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

CodePen

的结果

无法对齐两个html5输入范围

2 个答案: