<div>和<button>以相同的样式表现不同

Question

Button和div的行为风格相同。实际的宽度差异：div具有父宽度的100％，而按钮的作用类似于display: inline;，但宽度最小，没有实际的内联。两者都有display: block;。

这种奇怪的按钮行为是我试图通过div实现的。问题是'width: auto;'以另一种方式工作。因此，我给div的样式与默认情况下chrome中的button相同。结果，有一个属性集不同：-webkit-appearance，但是更改它对于width或display属性没有意义。

Codepen

我也尝试使用display: flex;来实现，但是宽度变成100％。 如果还有另一种方法可以做到这一点，则必须处理父级height: 0px和display: absolute

Answer 1

按钮显示为嵌入式块。如果您希望div以相同的方式“执行” 将div也显示为嵌入式块。至于为什么按钮会这样 请参阅以下帖子：

button behavior

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

}

<button></button>

<div>x</div>