Когда я устанавливаю кнопки display: block;
и width: auto;
на кнопку, я ожидаю, что кнопка растянется, чтобы заполнить контейнер, как это делают другие элементы блока. По какой-то причине это не так, по крайней мере, не в последнем Chrome.
Когда Googling вокруг, я нашел много людей, задающих один и тот же вопрос, которые были удовлетворены ответом на "Как я растягиваю свои кнопки, чтобы заполнить контейнер?" Это не, что меня интересует. (Я отлично могу растянуть мои кнопки, как мне нужно.) Проверка свойств кнопок, в том числе те, которые были введены по умолчанию браузером, не помогли меня тоже.
Я хотел бы понять, что заставляет кнопки игнорировать display: block; width: auto;
и оставаться горизонтально по их содержанию.
Вот демонстрация того, что я имею в виду:
button {
display: block;
}
<button style="width: auto;">button with `display:block; width:auto;`</button>
<button style="width: 100%;">button with `display:block; width:100%`</button>