<div> и <button> разное действие с одинаковыми стилями
Кнопка и div ведут себя по-разному с одними и теми же стилями. Фактическая разница в ширине: div имеет 100% родительской ширины, а кнопка действует как display: inline; с минимальной шириной, без фактического встраивания. И у обоих есть display: block;.
Это странное поведение кнопки - это то, чего я пытаюсь добиться с помощью div. Проблема в том, что 'width: auto;' работает по-другому. Так что мне дали тот же стиль div, что и кнопка по умолчанию в хроме. В результате одно свойство задается по-другому: -webkit-appearance, но менять его нет смысла ни для ширины, ни для свойства отображения.
Также я пытался добиться этого с помощью display: flex;, но ширина становится 100%.
Если есть другой способ добиться этого, он должен иметь дело с родительским height: 0px и display: absolute.
@DCR В чем причина такого различного поведения и как сделать так, чтобы ширина элементов div была минимальной, как ширина элементов кнопки.
Возможный дубликат Как стилизовать div как элемент кнопки?
@A.Meshu, этот вопрос касается центрирования, к сожалению, у меня нет ответа.
Ответы 1
Кнопка отображается как встроенный блок. Если вы хотите, чтобы div «действовал» одинаково отображать div как встроенный блок. Почему кнопки ведут себя так см. следующий пост:
div{
border:black solid ;
display:inline-block;
}<button></button>
<div>x</div>С display: inline-block; все элементы выравниваются в одну строку, а мне нужны в столбце с минимальной шириной.
Связанный пост делает вещи чище для меня, но проблема остается нерешенной.
Что именно вы просите?