同设display:flex类，a标签拉伸button却不拉伸？如何让二者仅占内容宽度

差异原因 #

<button>和<a>设置display:flex后表现不同，核心是浏览器对两类元素的默认布局规则存在本质区别：

• <button>属于表单交互控件，浏览器内置了特殊布局逻辑——即使改成flex容器，它依然会默认收缩到内容所需宽度，不会强行占满父容器空间。
• <a>原本是行内文本元素，设置display:flex后会变成块级flex容器，而块级元素的默认宽度规则是自动占满父容器的可用水平空间，所以会被拉伸。

解决方法 #

要让两个按钮都仅占据内容所需空间，无需显式设置width，只需要把display:flex替换成display:inline-flex。改成行内flex容器后，元素宽度会由内部内容决定，不会拉伸。

修改后的CSS代码 #

.my-button {
    display: inline-flex; /* 替换为inline-flex */
    align-items: center;
    justify-content: center;
    background-color: #515151;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: sans-serif;
    text-decoration: none;
    cursor: pointer;
}

保持不变的HTML代码 #

<button class="my-button" type="button">Button (button)</button>

<br>

<a href="" class="my-button">Button (link)</a>

内容的提问来源于stack exchange，提问作者Oscar