<div> и <button>разные актеры с одинаковыми стилями

Question

Кнопка и div действуют по-разному в одних и тех же стилях.Фактическая разница в ширине: у div есть 100% родительской ширины, а кнопка действует как display: inline; с минимальной шириной, без фактической вставки.И у обоих есть display: block;.

Странное поведение кнопок - это то, чего я пытаюсь добиться с помощью div.Проблема в том, что 'width: auto;' работает по-другому.Таким образом, я дал div в том же стиле, что и кнопка по умолчанию в Chrome.В результате есть одно свойство, устанавливаемое по-разному: -webkit-appearance, но изменять его не имеет смысла для свойства width или display.

Codepen

Также я пробовалчтобы достичь этого с display: flex;, но ширина становится 100%.Если есть другой способ добиться этого, он должен иметь дело с родителями height: 0px и display: absolute

Answer 1

Кнопка отображается в виде встроенного блока.Если вы хотите, чтобы div действовал таким же образом, отобразите div также как встроенный блок.Относительно того, почему кнопки ведут себя так, см. Следующий пост:

поведение кнопок

div{
border:black solid ;
display:inline-block;

}

<button></button>

<div>x</div>