Свойство display: table-cell не срабатывает на инпутах

#html #css #вёрстка #input #layout

Нужно сделать, чтобы кнопки в ряд занимали всю ширину .row.

Сейчас они смещены влево и не тянутся на всю ширину, хотя им присвоено свойство display:
table-cell;.

Вопрос: почему display: table-cell не работает для инпутов? И можно ли достичь желаемого
результата не оборачивая input в дополнительные div?



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  display: table-cell;
 }

  
  
  
  




    

Ответы

Ответ 1

Нужно переделывать на Flexbox, если количество кнопок неизвестно:



.row {
  height: 25px;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap
}
.row input {
  page-break-inside: avoid;
  break-inside: avoid;
}

  
  
  
  
  





Или же поставить ширину 25%, если их количество фиксированно:



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  width: 25%;
  /* Убираем влияние padding и border на конечную ширину input */
  box-sizing: border-box;
  /* Обнуляем margin */
  margin: 0;
 }

  
  
  
  



Ответ 2

Можно заменить display: table на display: flex + добавить свойство для потомков flex-grow: 1.



.row {
  display: flex;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
}

.input {
  flex-grow: 1;
}