使 'a' 元素适合按钮大小

Question

好吧，我有两个按钮（西班牙语），这些按钮位于 'a'（link 标签）内，因此：

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

'a' 的目的显然是将用户重定向到相应的页面，按钮用于样式（是的，我希望用户看到按钮而不是 links）

在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' 元素从按钮中脱颖而出。

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

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

然后是这样：

我想要的是 'a' 元素不从按钮突出，而是当用户单击按钮时，被重定向到相应的 link.

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

Answer 1

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

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

Answer 2

首先，您不能在 <a> 标签内嵌套 <button></button> 元素，这是无效的标记。请在此处查看原因：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;
}

使 'a' 元素适合按钮大小

Fit 'a' element to button size

html

css

href

button