<button> 元素显示属性不同于 <a> 元素 [重复]

Question

我正在尝试设计自定义按钮。为此，我创建了以下 css（参见下面的 sn-p）。

当我将 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

按钮行为不同的原因是按钮是所谓的“replaced element”，其（外观和）尺寸由操作系统/浏览器定义。无论如何，我建议在这里使用 flex-box。

.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>