时间戳

首页 > 解决方案 > 如何获得与输入在同一行的提交按钮？

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

问题描述

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

标签： cssformsinput

解决方案

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>

推荐阅读