html - 和 不同的行为，相同的风格

Question

Button 和 div 具有相同的样式但表现不同。宽度的实际差异:div 具有父级宽度的 100%，而按钮的行为类似于 display: inline;，宽度最小，没有实际内联。并且两者都有 display: block;。

那个奇怪的按钮行为是我试图用 div 实现的。问题是 'width: auto;' 以另一种方式工作。所以我给 div 的样式与 chrome 默认情况下的按钮相同。因此，有一个属性设置不同:-webkit-appearance，但更改它对宽度或显示属性没有意义。

Codepen

我也尝试用 display: flex; 来实现，但是宽度变成了 100%。如果有另一种方法实现这一点，它必须处理父级 height: 0px 和 display: absolute

Answer 1

一个按钮显示为内联 block 。如果你想让一个 div 以同样的方式“行动”也将 div 显示为内联 block 。至于为什么按钮会这样请参阅以下帖子:

button behavior

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

}

<button></button>

<div>x</div>