Question

到目前为止，除了最后一个搜索框，所有内容都已排好队。我有点新，花了我很长时间才能弄清楚这一点。我需要将所有搜索框，下拉菜单和单选按钮对齐在同一行并居中。搜索按钮和单选按钮继续移至下面的行。我在表单上添加了float，它使单选按钮向上，但似乎未对齐。会添加一个日历选项，并且需要在同一行上全部使用。最好的方法是什么？

.table
{
  float:left;
}

<div class="table">

        <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" />

        <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>
        <input type="radio" name="Before" value="male"> Before<br>
        <input type="radio" name="After" value="female"> After<br>
    </form>


    
    <input type="text" name="text" class="Search" placeholder="Search Here" />
    <input type="submit" class="submit" value="Search" />

Answer 1

表单是块元素。您可以通过CSS进行更改：

form { display: inline }

或

form {display: inline-block }

Answer 2

这会将所有内容放在一行中。

.table {
  display: inline-block
}

.Search {
  width: 10%
}

<div class="table">

  <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" />

  <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>
         
  <input type="radio" name="Before" value="male"> Before
  <input type="radio" name="After" value="female"> After
  <input type="text" name="text" class="Search" placeholder="Search Here" />
  <input type="submit" class="submit" value="Search" />
</div>

将单选按钮/多个搜索框水平对齐

2 个答案: