<button> чтобы занять всю доступную ширину

Question

Это был долгий день, и я уверен, что мне здесь чего-то не хватает, поэтому, пожалуйста, будьте осторожны со мной, если я!

Давайте возьмем следующую разметку HTML:

<div id="container">
    <button id="myButton">Some Text</button>
</div>

Я хочу сделать так, чтобы элемент button занимал всю ширину, предоставленную ему div#container. Обычно мы можем добиться этого, установив для свойства display значение block и удалив любые поплавки, которые могут быть наложены на элемент (это работает с другими элементами, такими как якоря и пролеты).

Однако, установив CSS для button#myButton на следующее, кнопка по-прежнему занимает только место текста плюс примененный мной отступ:

button#myButton {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
}

Может кто-нибудь объяснить, почему это может происходить. Очень важно, чтобы это работало в WebKit и не требовало кросс-браузерной поддержки.

Answer 1

Набор width: 100% с display: block или display: inline-block.

Пример: http://jsbin.com/iwifon/edit

Answer 2

Это должно к хитрости.Вам нужно float:left + display:block + position:relative для работы.Это заставляет width:100% и height:100% работать

button#myButton {
    display: block;
    padding: 5px 10px;
    font-weight: bold; 
    /*This is new stuff below this point*/
    float:left; /*For IE*/
    position:relative;/*For the 100% to work on height and width*/
    height:100%;/*Takes all available height*/
    width:100%;/*Takes all available width*/
    border:none; /*Get rid of default border in all browsers*/
    outline:none; /*Get rid of webkit and IE borders*/
}

Answer 3

для ввода с помощью кнопки типа или для отправки задан размер рамки, установленный в рамку-рамку, при установке его в поле-содержимое иногда можно решить некоторые проблемы ширины.