使“ a”元素适合按钮大小

Question

好吧，我有两个按钮（西班牙语），这些按钮都在“ a”（链接标记）中，因此：

<div class="MB789">
    <a href="#"><button class="B121">Ya soy miembro</button></a>
    <a href="#"><button class="B122">Quiero unirme</button></a>
</div>

“ a”的目的显然是将用户重定向到相应页面，并且按钮用于样式（是的，我希望用户看到按钮而不是链接）

在CSS中，我编写了以下内容：

.MB789{
    display: table;
    padding: 10px;
    text-align: center;
}

.MB789 button{
    border: none;
    border: 1px solid black;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

.MB789 a{
    margin: 10px;
    background: red; /*Debug: to visualize the elements 'a'*/
}

这是结果：

这就是问题所在，“ a”元素从按钮中脱颖而出。

这就是当我告诉元素将自己显示为表格时发生的情况。

.MB789 a{
    display: table;
    background: red; /*Debug: to visualize the elements 'a'*/
}

然后这就是发生的情况：

我想要的是'a'元素不会从按钮中突出，而是当用户单击按钮时，将其重定向到相应的链接。

注意：我知道可以重定向Javascript，但是我不使用该语言来执行此操作，因为用户可以从浏览器设置中禁用Javascript。

Answer 1

首先，您不能将<button></button>元素嵌套在<a>标签内，这是无效的标记。请在这里查看原因：Can I nest a <button> element inside an <a> using HTML5?

第二，您可以像按钮一样设置<a>标签的样式，这将解决您的问题。

您的HTML标记应如下所示：

<div class="MB789">
  <a href="#">Ya soy miembro</a>
  <a href="#">Quiero unirme</a>
</div>

您的CSS看起来像这样：

.MB789{
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.MB789 a{
  display: inline-block;
  border: 1px solid black;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}

Answer 2

您已经在按钮上放置了10px边距，因为它们位于a标签内，因此该边距将位于按钮和a标签的边缘之间，使它们从按钮中伸出。尝试删除该边距：

.MB789 button{
    border: none;
    border: 1px solid black;
    padding: 10px 20px;
    cursor: pointer;
}