button是一个行内元素，但是width属性在它上面起作用。为什么呢？
button { width: 300px; }
<button>asdfsdf</button> <button>234234d</button>
hkmswyz61#
大多数浏览器默认情况下将button元素显示为inline-block，根据（非规范）Appendix D. Default style sheet for HTML 4。因此，您可以预期width属性会起作用，如计算宽度和边距- Inline-block，non-replaced中所述。但不仅仅是. button元素是replaced elements：在CSS中，replaced element是一个表示在CSS作用域之外的元素，它们是一种外部对象，其表示独立于CSS。因此，它们有一些特殊的行为。例如，不管它们是display: inline-block还是display: inline，它们的大小都是根据width属性，根据计算宽度和边距-内联，替换来确定的。值得注意的是HTML5强制它们显示为inline-block，这在10.5.2绑定-button元素中有解释：
button
inline-block
width
display: inline-block
display: inline
@namespace url(http://www.w3.org/1999/xhtml); button { binding: button; }
当 button 绑定应用于button元素时，该元素应呈现为“inline-block”框，该框呈现为按钮，其内容为该元素的内容。
nlejzf6q2#
参见W3C Reference（HTML4元素默认CSS样式的列表）。button是一个inline-block元素（默认情况下），它可以有一个width集，与inline元素相反。
inline
cgh8pdjw3#
设置min-width: 300px;。即使按钮是inline-block，它对我也有效。
min-width: 300px;
3条答案
按热度按时间hkmswyz61#
大多数浏览器默认情况下将
button元素显示为inline-block，根据（非规范）Appendix D. Default style sheet for HTML 4。因此，您可以预期
width属性会起作用，如计算宽度和边距- Inline-block，non-replaced中所述。但不仅仅是.
button元素是replaced elements：在CSS中，replaced element是一个表示在CSS作用域之外的元素，它们是一种外部对象，其表示独立于CSS。
因此，它们有一些特殊的行为。例如，不管它们是
display: inline-block还是display: inline，它们的大小都是根据width属性，根据计算宽度和边距-内联，替换来确定的。值得注意的是HTML5强制它们显示为
inline-block，这在10.5.2绑定-button元素中有解释：当 button 绑定应用于
button元素时，该元素应呈现为“inline-block”框，该框呈现为按钮，其内容为该元素的内容。nlejzf6q2#
参见W3C Reference（HTML4元素默认CSS样式的列表）。
button是一个inline-block元素（默认情况下），它可以有一个width集，与inline元素相反。cgh8pdjw3#
设置
min-width: 300px;。即使按钮是
inline-block，它对我也有效。