元素<button>显示属性与<a>元素不同

Question

我正在尝试设计自定义按钮。为此，我创建了以下 css(请参阅下面的代码片段(。

当我将 css 与<button>一起使用时，它会按预期工作。如果我将其与<a>元素一起使用，则按钮的宽度为 100%。我知道使用display-block是造成这种情况的原因，但我不知道为什么它适用于我的按钮而不是我的<a>元素。它们都具有相同的显示属性，在我看来，它们的行为方式应该相同。

(按钮应彼此对齐，并放置在父.buttonRow的中间(。

两个按钮都应该看起来像第一个示例(使用<button>(

.buttonRow {
display: block;
text-align: center;
}
.button {
display: block;
margin: 0 auto;
margin-bottom: 15px;
background-color: #ccad91;
color: white;
font-size: 18px;
padding: 17px 50px;
border-radius: 35px;
border: none;
outline: none;
outline: 0;
}

<div class="buttonRowl">
<button class="button">Proceed</button>
<a class="button" href="index.html">Cancel</a>
</div>

Answer 1

按钮行为不同的原因是按钮是所谓的"替换元素"，其(外观和(尺寸由操作系统/浏览器定义。无论如何，我建议在这里使用弹性框。

.buttonRow {
display: flex;
flex-direction: column;
}
.button {
margin: 0 auto 15px auto;
background-color: #ccad91;
color: white;
font-size: 18px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 17px 50px;
border-radius: 35px;
border: none;
outline: none;
text-decoration: none;
}

<div class="buttonRow">
<button class="button">Proceed</button>
<a class="button" href="index.html">Cancel</a>
</div>