无法对齐两个html5输入范围

时间:2015-10-17 13:46:23

标签: html css html5

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

2 个答案:

答案 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)

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

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

CodePen

的结果