Как растянуть кнопку на всю ширину CSS

Чтобы растянуть кнопку на всю ширину в CSS, можно использовать свойства width: 100% и display: block или display: inline-block.

Например, чтобы растянуть кнопку <button> на всю ширину родительского элемента, можно использовать CSS-код:

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

При этом кнопка будет иметь блочный тип отображения, а ее ширина будет занимать 100% ширины родительского элемента.

Если кнопка должна быть внутри блочного элемента, например, <div>, то ее ширина будет автоматически растянута на всю ширину родительского блока. Но если внутри блока используется другой блочный элемент, например, <ul>, то кнопка может занимать только свою собственную ширину. В таком случае также нужно установить свойство width: 100%.

div {
    background-color: #f2f2f2;
    padding: 20px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

В этом примере кнопка <button> внутри блока <div> растянется на всю ширину родительского блока.