如何获得与输入在同一行的提交按钮？答案

【问题标题】：How to get submit button on same line as input?如何获得与输入在同一行的提交按钮？
【发布时间】：2019-04-15 13:54:33
【问题描述】：

我希望我的搜索按钮在桌面上与我的输入字段对齐。当它缩放时，如果它低于输入字段就可以了，但它确实需要可缩放。现在它自动位于输入表单下方，所以我知道这与我的样式有关，因为没有它，它将在字段旁边对齐。这是一个 [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>

【问题讨论】：

你好@TMiller96，如果你只是移除显示器：阻止它已经对齐，但如果你愿意，请检查我的答案

标签： css forms input

【解决方案1】：

只需将.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>

【讨论】：

【解决方案2】：

如果您将display: inline; 添加到您的 .searchMe 中，您应该可以开始了。

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：