范围输入周围的文本在html中垂直移位

Question

我有以下代码用于范围输入以及一些应用的样式：

<style media="screen">
    .contactinfo label{display: inline-block;
  width: 170px;
  text-align: right;
  vertical-align:top;
  }
  .contactinfo div ~ div {
  margin-top: 2px;
  }
  .contactinfo {background:lightyellow; border:10px solid yellow; margin-bottom:10px; width: 720px;}
  .contactinfo textarea {width: 180px; box-sizing: border-box;}
    </style>
    <fieldset class="contactinfo">
        <legend>Your indicators</legend> <br>
        <div class="">
          <label for="ht">Height:</label>
          Short <input type="range" name="ht" id="ht" value="" min="0" max="100"> Tall
        </div>
        <div class="">
            <label for="sal">Salary:</label>
            Poor <input type="range" name="ht" id="ht" value="" min="0" max="100"> Rich
        </div>
      </fieldset>

但是范围输入两侧的文本没有正确对齐。这是现在的样子： 即使在我删除vertical-align：top之后它也没有正确对齐。 这就是现在的样子： 我想要的是（忽略亮点）：

Answer 1

删除vertical-align:top; 见https://jsfiddle.net/aqfcde2d/