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>

Answer 2

我最终只是为它做一个没有边界的桌子。人们说不要使用表，但这使它变得容易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>

在下拉菜单上方放置标签

2 个答案: