Сделать кнопку заполнить всю ширину элемента контейнера?

Question

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

Код:

.container { 
 
    background-color: #ddd; 
 
    padding: 10px; 
 
    max-width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
    padding: 10px 
 
}

<div class="container"> 
 

 
    <div class="button"> 
 
    Fills the full width 
 
    </div> 
 

 
    <button class="button"> 
 
    Does not fill the full width 
 
    </button> 
 

 
</div>

Добавление display:block к .button не работает (? Хотя я уверен, что должен быть частью в ответ), и ни один не делает left: 0; right: 0. width: 100%, но он игнорирует свойство заполнения контейнера и делает кнопку слишком близко к правой стороне контейнера.

Вот JSFiddle: http://jsfiddle.net/mn40mz2n/

Answer 1

Добавьте: свойство "коробчатого размеров границ окна" для всех элементов. Свойства ширины и высоты включают прокладку и границу, но не маржу. Это обеспечит правильность измерений по элементам и учёт прокладки. display: block and width: 100% - это правильный способ пройти полную ширину, но вам нужно удалить левое/правое поле на кнопке, поскольку оно выталкивает его за пределы содержащего элемента.

* { 
    box-sizing: border-box 
} 

.container { 
    background-color: #ddd; 
    padding: 10px; 
    margin: 0 auto; 
    max-width: 500px; 
} 

.button { 
    background-color: #bbb; 
    display: block; 
    margin: 10px 0; 
    padding: 10px; 
    width: 100%; 
} 

для получения дополнительной информации о свойстве коробчатых размеров, читать MDN docs.

Answer 2

Вы можете использовать CSS3 calc().

Если вам нужно это для работы с устаревшими браузерами, см. Прием here.

.container { 
 
    background-color: #ddd; 
 
    padding: 10px; 
 
    max-width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
    padding: 10px 
 
} 
 

 
button.button { 
 
    width: calc(100% - 20px); 
 
}

<div class="container"> 
 

 
    <div class="button"> 
 
    Fills the full width 
 
    </div> 
 

 
    <button class="button"> 
 
    Does not fill the full width 
 
    </button> 
 

 
</div>

Answer 3

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

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

Answer 4

Возможные ответы:

Answer 1: Why does display:block not stretch buttons or input elements

Answer 2: CSS positioning to fill container: width vs. left/right?

width: 100% 

работает должным образом. Кнопка перемещается вправо из-за left-margin в кнопке.