Как получить кнопку отправки в той же строке, что и ввод?

Question

Я хочу, чтобы кнопка поиска совпала с полем ввода на рабочем столе.Когда он масштабируется, хорошо, если он опускается ниже поля ввода, но он должен быть масштабируемым.Сейчас он автоматически располагается под формой ввода, поэтому я знаю, что это связано с моим стилем, потому что без него он будет выровнен прямо рядом с полем.Вот кодекс (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

вы можете просто удалить дисплей: блок будет выровнен, вам не нужно использовать встроенный. Теперь, если вы хотите, вы можете настроить таргетинг на 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>

Answer 2

Здравствуйте, просто добавьте 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 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>

Answer 4

Просто измените .searchMe {display: block} на inline-block

обновленный копен

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: inline; к вашему .searchMe, вам будет хорошо.