Адаптивный ввод во всю ширину с помощью кнопки

#html #css

#HTML #css

Вопрос:

У меня здесь есть скрипка:https://jsfiddle.net/ufLpqdtj /

Моя проблема заключается в том, что я пытаюсь заставить мое окно поиска и кнопку всегда располагаться на странице во всю ширину, независимо от устройства, на котором оно запущено.

В Javascript я всегда мог бы сделать ширину текстового поля 100% минус пиксельная ширина кнопки (кнопка всегда одинакового размера), но я чувствую, что мне чего-то не хватает и что это можно сделать изначально в CSS.

Есть мысли или предложения?

 #commonSearchContainer {
  display: block;
  clear: both;
  width: 100%;
  position: relative;
}
#commonSearchTerm {
  width: 100%;
  margin: 25px 0px 0px 0px;
  padding: 5px;
  border: 1px solid #999999;
  height: 35px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.common-search-term-wrapper {
  width: 90%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.common-search-button {
  background-color: #E9700D;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 25px 0px 0px 10px;
  width: 80px;
  color: #fff;
  padding: 7px;
  font-style: italic;
  cursor: pointer;
}

 <div id="searchSection" class="common-search-section">
  <div class="common-search-term-wrapper">
    <input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
  </div>
  <div id="commonSearchSubmit" class="common-search-button">
    Search
    <div style="clear: both;"></div>
  </div>
</div>

Ответ №1:

Что я обычно делаю для такого макета, так это создаю родительский контейнер вокруг элементов (как у вас) и передаю его position: relative и width: 100% .

Затем я использую position: absolute и display: inline-block для внутренних элементов. Установите ширину для элементов фиксированного размера и используйте left или right для позиционирования всех элементов.

В вашем случае это было бы что-то вроде этого: https://jsfiddle.net/ufLpqdtj/1 /

Ответ №2:

Ну, вы не должны использовать div в качестве кнопки. Для этого есть html-элементы.

Если вы правильно поняли, чего вы хотите достичь…

 form {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  }

#commonSearchTerm {
  width: 80%;
}
#searchButton {
  width: 80px;
  border-radius: 0;
  background-color: red;
  border: none;
  padding: 2px;
  color: white;
}

 <form >
  <input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
  <input id="searchButton" type="submit">
</form>

Для этого используется flexbox, который является более гибким при создании адаптивного материала.

1. Спасибо за ваш ответ, хотя он отличался от того, что я запрашивал. Встроенный flex поддерживается только в CSS3, поэтому не подходит, также кнопка div является базовой для кнопки, которая будет содержать изображение внутри, а также текст, а также раскрывающийся список внутри него.

2. @Nick ну, никто не мешает вам добавлять изображение к кнопке и прикреплять к нему выпадающий список, и в итоге это выглядело бы чище. Всего лишь мои 2 цента.

3. Я принял другой ответ, потому что он взял информацию и предоставил незначительные изменения для завершения того, что мне было нужно, вместо того, чтобы перестраивать все решение. Текущий код является прототипом того, что будет гораздо более сложной кнопкой, которая превосходит то, что может предоставить традиционная кнопка отправки. Вы обнаружите, что создание собственных элементов управления в соответствии с различными требованиями является очень распространенной практикой. Спасибо вам за ваше решение, хотя! То, что мне не помогает, может быть именно тем, что нужно кому-то другому!