Question

在桌面上时，我希望搜索按钮与输入字段对齐。当它缩放时，如果它降到输入字段以下是很好的，但是它确实需要可伸缩。现在它会自动位于输入表单下，因此我知道这与我的样式有关，因为如果没有它，它将与字段对齐。这是[codepen]（https://codepen.io/miller765/pen/YMzPKJ）和代码。

form.searchbar {
  margin: 25px 50px;
}

.searchMe {
  display: block;
  background-color: rgb(0, 91, 148);
  color: white;
  padding: 1px 3px;
  border: none;
  cursor: pointer;
  width: auto;
  opacity: 1.0;
  border-radius: 5px;
  font-family: Arial Sans;
  font-size: 1em;
}

.searchMe:hover {
  background-color: rgb(0, 57, 99);
}

<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>

Answer 1

如果将display: inline;添加到您的.searchMe中，那应该很好。

Answer 2

form.searchbar {
  margin: 25px 50px;
}

.searchMe {
  background-color: rgb(0, 91, 148);
  color: white;
  padding: 1px 3px;
  border: none;
  cursor: pointer;
  width: auto;
  opacity: 1.0;
  border-radius: 5px;
  font-family: Arial Sans;
  font-size: 1em;
}

.searchMe:hover {
  background-color: rgb(0, 57, 99);
}

<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>

Answer 3

只需将.searchMe {display: block}更改为inline-block

updated copepen

form.searchbar {
  margin: 25px 50px;
}

.searchMe {
  display: inline-block;
  background-color: rgb(0, 91, 148);
  color: white;
  padding: 1px 3px;
  border: none;
  cursor: pointer;
  width: auto;
  opacity: 1.0;
  border-radius: 5px;
  font-family: Arial Sans;
  font-size: 1em;
}

.searchMe:hover {
  background-color: rgb(0, 57, 99);
}

<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>

Answer 4

您好，只需将display: inline-block;添加到.searchMe类查看下面的演示

form.searchbar {
      margin: 25px 50px;
    }

    .searchMe {
      display: inline-block;
      background-color: rgb(0, 91, 148);
      color: white;
      padding: 1px 3px;
      border: none;
      cursor: pointer;
      width: auto;
      opacity: 1.0;
      border-radius: 5px;
      font-family: Arial Sans;
      font-size: 1em;
    }

    .searchMe:hover {
      background-color: rgb(0, 57, 99);
    }

<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>

Answer 5

您只需删除display：block即可将其对齐，而不必使用inline。现在，如果您愿意，甚至可以缩放form.searchbar {display：flex;}并保持对齐

form.searchbar {
  margin: 25px 50px;
  display:flex;
}

.searchMe {
  display:block;
  background-color: rgb(0, 91, 148);
  color: white;
  padding: 1px 3px;
  border: none;
  cursor: pointer;
  width: auto;
  opacity: 1.0;
  border-radius: 5px;
  font-family: Arial Sans;
  font-size: 1em;
}

.searchMe:hover {
  background-color: rgb(0, 57, 99);
}

<form id="" class="searchbar" action="searchAppt.php" method="get">
  <input type="text" name="terms" style="width: 300px" size="40" class="sbar" placeholder="Search..." oninput="validity.valid||(value='');" onblur="if (this.value == '') {
                                       this.value = '';
                                   }" onfocus="if (this.value == '') {
                                       this.value = '';
                                   }" />&nbsp;&nbsp;
  <button type="submit" style="width: 100px" class="searchMe">Search</button>
</form>

如何在与输入相同的行上获取提交按钮？

5 个答案: