时间戳

首页 > 解决方案 > 使“a”元素适合按钮大小

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

问题描述

好吧，我有两个按钮（西班牙语），这些按钮位于“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。

标签： csshtmlbuttonhref

解决方案

首先，您不能在标签<button></button>内嵌套元素<a>，这是无效标记。请在此处查看原因：我可以使用 HTML5 在 <a> 中嵌套 <button> 元素吗？

<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;
}

推荐阅读