Firefox 内联列表中的标签和 Input/Select 对齐

Question

我想要一个内联列表，标签显示在相应输入的顶部。

这个 fiddle 展示了我正在使用的一个简单实现：JSFiddle

HTML

<form>
    <ul>
        <li>
            <label for="FirstName">First Name</label>
            <input type="text" id="FirstName" name="FirstName" />
        </li>
        <li>
            <label for="Gender">Gender</label>
            <select id="Gender" name="Gender">
                <option value="1">Male</option>
                <option value="2">Female</option>
                <option value="3">N/A</option>
            </select>
        </li>
        <li>
            <input type="submit" value="Filter" />
        </li>
    </ul>
</form>

CSS

ul {
    list-style: outside none none;
}
li {
    display: inline-block;
}
input, select {
    display: block;
}

这在除 Firefox 之外的所有浏览器中都运行良好，我不知道为什么。 float: left 对我来说不是一个很好的解决方案，因为它会将内容对齐到 li 的顶部。在理想的解决方案中，"Filter" 按钮将在视觉上与左侧的 input 和 select 元素对齐，就像上面在 IE 和Chrome.

Answer 1

如何使用 display: inline-block;对于输入，select css 也是？

input, select {
display: inline-block;
}

另外，添加显示：块；在 css.

中添加标签

此处示例：

https://jsfiddle.net/zy1uz0k3/10/

Answer 2

使用 FlexBox 的解决方案。

FlexBox Guide

ul {
  list-style: outside none;
  display: flex;
  flex-direction: row;
}
li {
  display: flex;
  flex-direction: column;
  width: 150px;
  margin: 10px;
}
li.submit {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
li.submit [type="submit"] {
  width: 100%;
}

<form>
  <ul>
    <li>
      <label for="FirstName">First Name</label>
      <input type="text" id="FirstName" name="FirstName" />
    </li>
    <li>
      <label for="Gender">Gender</label>
      <select id="Gender" name="Gender">
        <option value="1">Male</option>
        <option value="2">Female</option>
        <option value="3">N/A</option>
      </select>
    </li>
    <li class="submit">
      <input type="submit" value="Filter" />
    </li>
  </ul>
</form>

Firefox 内联列表中的标签和 Input/Select 对齐

Label and Input/Select alignment inside inline list in Firefox

html

css

firefox