← Все вопросы
Как сделать кнопку на всю ширину родителя?
7
Кнопка <button> занимает только по ширине текста. Хочу растянуть её на всю ширину блока (например, в форме под полями ввода). Как?
2 ответа
12
width: 100% на кнопке. Кнопка по умолчанию inline-block и подгоняется под текст, поэтому ширину нужно задать явно:
.btn-block {
width: 100%;
box-sizing: border-box; /* чтобы padding не вылез за 100% */
}
box-sizing: border-box важен, если у кнопки есть padding или border — иначе она станет чуть шире контейнера и вызовет горизонтальный скролл. Если родитель — флекс-контейнер (колонка), можно вместо ширины задать align-self: stretch.
4
width: 100%.
Ваш ответ
Войдите, чтобы ответить на вопрос.
