Почему ввод и кнопка не занимают всю ширину деления?

Question

У меня есть следующий HTML-код:

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Вот скрипка для просмотра вживую: https://jsfiddle.net/nner02rk/2

Я хочу, чтобы входные данные для поиска и ввода принимали всю ширину .search-wrapper или центрировались внутри search-wrapper div.

Answer 1

Вы можете удалить position: absolute в .search и добавить float: left к .search-query и .search.

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  float: left;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  float: left;
  /* position: absolute; */
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Answer 2

Множество способов сделать это в зависимости от того, как вы хотите распределить ширину элемента. Один из способов - установить ширину вашей кнопки и использовать calc, чтобы сделать ввод на 100% меньше указанной ширины кнопки:

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: calc(100% - 55px);
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  width: 55px;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

Еще один вариант использования таблицы CSS:

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
  display: table;
}

.search-wrapper>span {
  display: table-cell;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: 100%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 100%;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <span><input type="search" class="search-query" placeholder="Search"></span>
    <span><input type="submit" value="search" class="search"></span>
    <div class="results"></div>
  </div>
</form>

Answer 3

Добавление атрибута ширины к поисковому запросу и классам поиска. Вот пример:

.search-query{
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
padding-left: 3%;
width: 200px;
}