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

393

17 февраля 2017, 01:11

Нужно сделать, чтобы кнопки в ряд занимали всю ширину .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; 
 }

<div class="row"> 
  <input class="input" type="button" value="Кнопка 1"> 
  <input class="input" type="button" value="Кнопка 2"> 
  <input class="input" type="button" value="Кнопка 3"> 
  <input class="input" type="button" value="Кнопка 4"> 
</div>

Answer 1

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

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

<div class="row"> 
  <input class="input" type="button" value="Кнопка 1"> 
  <input class="input" type="button" value="Кнопка 2"> 
  <input class="input" type="button" value="Кнопка 3"> 
  <input class="input" type="button" value="Кнопка 4"> 
  <input class="input" type="button" value="Кнопка 5"> 
</div>

Или же поставить ширину 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; 
 }

<div class="row"> 
  <input class="input" type="button" value="Кнопка 1"> 
  <input class="input" type="button" value="Кнопка 2"> 
  <input class="input" type="button" value="Кнопка 3"> 
  <input class="input" type="button" value="Кнопка 4"> 
</div>

Answer 2

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

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

<div class="row"> 
  <input class="input" type="button" value="Кнопка 1"> 
  <input class="input" type="button" value="Кнопка 2"> 
  <input class="input" type="button" value="Кнопка 3"> 
  <input class="input" type="button" value="Кнопка 4"> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как заполнить БД MS Access с помощью LINQ? (link2db)

В поисках инструмента для работы с БД при помощи LINQ наткнулся на linq2db, но толи я тупой, толи документация слишком скудная, но я застрял на элементарном...

423

Когда в ASP.NET MVC стоит прибегать к WCF?

Видел, что некоторые Web-приложения работают с WCF-службами

393

Как узнать размер объекта?

Какие есть способы получить размер объекта в памяти? Можно не обязательно в рантайме (кодом)

418

Как устранить конфликт? [требует правки]

Как устранить конфликт?

354