Как заставить кнопку растягиваться по ширине столбца

Question

Я пытаюсь сделать так, чтобы кнопка перекрывала ширину столбца.

Например, здесь: http://davidnhutch.com. Обратите внимание, насколько светло-серые кнопки имеют такой же размер, как и текст, который они содержат?Я бы хотел, чтобы каждая кнопка занимала ширину этого столбца, но не могу понять, как это сделать.Я немного осмотрелся, но все еще новичок в этом.

Есть идеи?

Answer 1

Вам нужно будет сделать их блочными элементами, чтобы можно было установить ширину:

.button {
    display: block;
    width: 100%;
}

Answer 2

Как правило, эти кнопки являются так называемыми «встроенными элементами». Браузер рендерера имеет очень сложные алгоритмы размещения этих элементов. Это похоже на Набор текста , но с объектами на экране вместо этого.

CSS и HTML вместе влияют на работу алгоритма: определение ширины и высоты, цвета и т. Д. Объектов. Также их положение и то, как текст течет, или как долго кнопки.

Однако есть ограничение. Вы не можете использовать что-либо похожее на переменную ширину для встроенных элементов.

Добавление width: 100%; display: block, как предлагали другие, делает некоторые кнопки идеальными: но только тогда, когда они начинаются слева или справа от вмещающего поля. Если это после предложения, то оно (должно) отображаться как:

<---width of container--->
Text
<----------button-------->

Однако кнопка больше не стоит после «Текст», а находится под ней. Это потому, что теперь это так называемый «блочный элемент». Это как полный абзац, а не элементы в текстовой строке.

Если это то, что вы хотите; нормально и проблема решена. Если это не то, что вы хотите, а вместо этого хотите:

<---width of container--->
Text <-------button------>

Это невозможно . _{CCS4 было бы здорово, если бы он добавил inline-width: 100% или inline-height, и решил бы много проблем. Однако CSS4 еще не существует.}

Answer 3

Добавление width:100% к .button, кажется, работает для центральной и правой кнопок внизу страницы.