范围输入周围的文本在 html 中垂直移动答案

【问题标题】：text around range input vertically shifted in html范围输入周围的文本在 html 中垂直移动
【发布时间】：2016-07-16 21:41:46
【问题描述】：

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

<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 它也没有正确对齐。这是它现在的样子：我想要的是（忽略亮点）：

【问题讨论】：

标签： html input range

【解决方案1】：

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

【讨论】：