Question

我希望有一个内联列表，其标签显示在相应的输入之上。

这个小提琴显示了我使用的简单实现：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的顶部对齐。在理想的解决方案中，＆＃34;过滤器＆＃34;按钮在视觉上与左侧的input和select元素一致，就像上面IE和Chrome中的小提琴示例一样。

Answer 1

如何使用display：inline-block;对于输入，也选择css？

input, select {
display: inline-block;
}

另外，添加display：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中的内联列表中的标签和输入/选择对齐方式

2 个答案: