Как сделать button блочным элементом?

Question

Что бы применялся max-width

<style>
  button {}
  
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    max-width: 96px;
    height: 72px;
  }
</style>

<button class="button">Кнопка</button>
<div class="button">Кнопка</div>

Answer 1

Кнопки не тянутся, как блоки, на всю ширину, при любом значении display.

Чтобы приблизить поведение кнопок к блочным элементам, можно растянуть их вручную - width: 100%;, тогда и максимальная ширина применится также как на обычный блочный элемент.

upd: ответ на ответ выше, так как не могу оставлять комментарии:

@Sevastopol' Если у нас есть два изначально не блочных элемента, например, span и button, и мы зададим им блочное поведение через display: block или display: flex, мы получим разный результат: span (и большинство других элементов) автоматически растянется на 100%, а button останется своей ширины. Ширину 100%, как я и написал, и как сделали вы выше, придется задать вручную. Что, собственно, я и написал, чтобы у автора заработал max-width так, как он хотел.

Answer 2

Кнопку button можно использовать как блочный элемент display: block;, при этом установить ему ширину width: 100%;, а также максимальную ширину max-width: 800px;.

Пример (открыть на всю страницу и растягивать):

div,
span,
button,
.button {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 22px;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  align-items: center;
  border: 1px solid #000;
}

<div>Кнопка</div>
<span>Кнопка</span>
<button>Кнопка</button>
<div class="button">Кнопка</div>
<button class="button">Кнопка</button>

БЛОГ НА HUSL

Как сделать button блочным элементом?

Ответы (2 шт):