在下拉菜单上方定位标签

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

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

#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>

试试这个，我刚刚创建了div，嵌套了您假装在彼此上方查看的元素并设置显示：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>

我最终只是为它制作了一个没有边框的表格。人们说不要使用表格，但这会使它容易 10 倍。这是我最终使用的代码。如果有人有不使用表格的方法，请通知我们。谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title> Asset Tracking System</title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: None;
            text-align: left;
            padding: 8px;
        }
        .Container {
            display: inline-block;
        }
        .Row {
            display: table-row;
        }
        .Cell {
            display: table-cell;
        }
        #search, form {
            display: inline-block;
            padding-top: 10px;
        }
        label {
            display: inline-block;
        }
    </style>

</head>
<body>
    <nav class="Container">
        <nav class="Row">
            <nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 0px 2px 2px; border-radius:5px 0px 0px 5px; padding-left:10px;"><a href="SearchPage.html" style="color:white">Asset Search</a></nav>
            <nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 0px 2px 2px; padding-left:10px;">Help</nav>
            <nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 2px 2px 2px; padding-left:10px;border-radius:0px 5px 5px 0px">Logout</nav>
        </nav>
    </nav>
    <center>
        <h2>Asset Tracking</h2>
        <table>
            <tr>
                <th><center>Search By Employee Info</center></th>
                <th><center>Search By Item Info</center></th>
            </tr>
            <tr>
                <td>
                    <div class="Cell" style="padding-top:30px;">
                            <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" />
                    </div>
                </td>
                <td>
                    <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>
                        <input type="radio" name="time" value="before"> Before<br>
                        <input type="radio" name="time" value="after"> After<br>
                    </form>
                    <input type="text" name="text" class="Search" placeholder="Search Here" />
                    <input type="submit" class="submit" value="Search" />
                </td>

        </table>
    </center>
</body>
</html>

相关内容

最新更新

热门标签：