html - 将标签定位在下拉列表上方

Question

我有多个彼此水平相邻的搜索框/按钮。我只希望标签位于搜索框上方而不是它们旁边。如果有人可以快速修复使单选按钮正确垂直对齐，我也将不胜感激。

我尝试将标签放在容器中并将位置设置为绝对位置，但这使得下拉菜单和单选按钮不再起作用。

#search, form {
            display: inline-block;
        }
        label {
            display:inline-block;
        }

<center>
        <form>

                <label>Search By Employee</label>

                <select>
                    <option value="Last Name">Last Name</option>
                    <option value="First Name">First Name</option>
                    <option value="Employee ID">Employee ID</option>
                    <option value="Job ID">Job ID</option>
                    <option value="Phone">Phone</option>
                    <option value="Ipad Number">Ipad Number</option>

                </select>

                <input type="text" name="text" class="Search" placeholder="Search Here" />
                <input type="submit" class="submit" value="Search" />

                <label>Select By Item</label>
                <select>
                    <option value="Phones">Phones</option>
                    <option value="Tablets">Tablets</option>
                    <option value="Computers">Computers</option>
                    <option value="Cellphone">Cellphone</option>
                    <option value="Docks">Docks</option>
                    <option value="Monitors">Monitors</option>
                    <option value="Gloves">Gloves</option>
                    <option value="Sleeves">Sleeves</option>

                </select>
        </form>

        <form>
            <input type="radio" name="time" value="before"> Before<br>
            <input type="radio" name="time" value="after"> After<br>
        </form>

        <form>
            <input type="text" name="text" class="Search" placeholder="Search Here" />
            <input type="submit" class="submit" value="Search" />
        </form>
    </center>

Answer 1

试试这个，我刚刚创建了 div，嵌套了你假装在彼此上方查看的元素并设置了 display: flex 和 flex-flow:column

#search, form {
  display: inline-block;
}
label {
  display:inline-block;
}
.flexs {
  display:flex;
  flex-flow: column;
}

<center>
  <form>
    <div class="flexs">
      <label>Search By Employee</label>
      <select>
        <option value="Last Name">Last Name</option>
        <option value="First Name">First Name</option>
        <option value="Employee ID">Employee ID</option>
        <option value="Job ID">Job ID</option>
        <option value="Phone">Phone</option>
        <option value="Ipad Number">Ipad Number</option>
      </select>
    </div>
    <input type="text" name="text" class="Search" placeholder="Search Here" />
    <input type="submit" class="submit" value="Search" />
    <div class="flexs">
      <label>Select By Item</label>
        <select>
          <option value="Phones">Phones</option>
          <option value="Tablets">Tablets</option>
          <option value="Computers">Computers</option>
          <option value="Cellphone">Cellphone</option>
          <option value="Docks">Docks</option>
          <option value="Monitors">Monitors</option>
          <option value="Gloves">Gloves</option>
          <option value="Sleeves">Sleeves</option>
        </select>
      </div>
    </form>
    <form>
      <div class="flexs">
        <input type="radio" name="time" value="before"> Before<br>
        <input type="radio" name="time" value="after"> After<br>
      </div>
    </form>
    <form>
      <input type="text" name="text" class="Search" placeholder="Search Here" />
      <input type="submit" class="submit" value="Search" />
    </form>
  </center>