Question

如何在Firefox中垂直对齐这些输入？

适用于Chrome，Safari和Opera，但不适用于Firefox（在MacOS，Windows和Linux Mint中测试的第57版）。从type="number"中删除input可以在Firefox中解决它，但不是我要删除的内容。

label {
  display: inline-block;
}

.form-control {
  display: block;
}

<body>
  <label>First number <input class="form-control" type="number"></label>
  <label>
    Dropdown
    <select class="form-control">
      <option label="First option" selected="selected">
        First option
      </option>
    </select>
  </label>
</body>

Answer 1

您需要重置vertical-align 显示的元素的inline-block属性。

label {
  display: inline-block;
  vertical-align: top;
}

.form-control {
  display: block;
}

<body>
  <label>
     First number 
     <input class="form-control" type="number">
  </label>
  <label>
    Dropdown
    <select class="form-control">
      <option label="First option" selected="selected">
        First option
      </option>
    </select>
  </label>
</body>

在Firefox中垂直对齐选择和数字输入

1 个答案: