Поле ввода рядом с кнопкой отправки (неизвестная ширина + пробел)

Question

Я пытаюсь установить свою форму так, чтобы она имела поле ввода слева с кнопкой отправки справа. Однако мне нужно, чтобы поле ввода занимало все оставшееся пространство минус пробел 1rem.

Я попытался с этим кодом:

<aside class="widget-area"> 
    <section class="widget-search"> 
     <form class="search-form"> 
      <label class="search-label"> 
       <span class="search-reader-text">Search for:</span> 
       <input type="search" class="search-field" placeholder="Search..." /> 
      </label> 
      <input type="submit" class="search-submit" /> 
     </form> 
    </section> 
</aside> 

.search-form { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.search-label { 
    display: table-cell; 
} 

.search-input { 
    display: table-cell; 
} 

Однако, все это делает переместить кнопку внутри поля ввода ...

Я также попробовал этот маршрут:

.search-form { 
    display: table; 
} 

.search-label { 
    display: table-cell; 
    padding: 0 1rem 0 0; 
} 

.search-input { 
    display: table-cell; 
} 

Теперь кнопка находится рядом с полем ввода, но она выходит из контейнера ...

Answer 1

Вы можете использовать Flexbox на контейнере, чтобы ваш вход мог принимать любое оставшееся пространство.

Codepen с двумя примерами, где кнопки имеют разную ширину и все же, вход адаптируется к каждой ситуации автоматически.

Соответствующий CSS является:

.form-line { 
    display: flex; 
} 
.search-input { 
    flex: 1 0 auto; 
} 

где 3 компоненты гибких средств: «может расти, не сжимаются, flex-basis набор для авто» (несколько связанных с начальной шириной здесь)

Совместимость: IE9 +
шпаргалку: CSS-tricks

Примечание: Я добавил for/id на этикетке/входа, так что аль читатели с экрана могут связывать их и читать этикетку своим пользователям

Answer 2

Почему бы вам не сделать это?

.search-form { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
.search-label { 
 
    float: left; 
 
    width:200px; 
 
    background: lightblue; 
 
} 
 

 
.search-submit { 
 
    width: calc(100% - 200px); 
 
    box-sizing: border-box; 
 
}

<aside class="widget-area"> 
 
    <section class="widget-search"> 
 
     <form class="search-form"> 
 
      <label class="search-label">Hello</label> 
 
      <input class="search-submit" /> 
 
     </form> 
 
    </section> 
 
</aside>