Question

我有一个<button>元素，它已经居中到页面中间，并在this JSFiddle中看到了一个锚点标记。

如果您将鼠标悬停在按钮的任一侧，则链接处于活动状态，从JSFiddle开始。我可以通过将其包裹在<div>附近，然后将其应用于<div>来阻止这种情况：

div {
  display: block;
  margin: 0 auto;
}

然而，有更好的解决方案，因为在我的情况下，我有很多像这样的按钮，它需要很长时间才能应用？感谢。

Answer 1

除了“A按钮”文本之外，您指的是按钮内的空格，因为我看不到按钮外的任何可点击区域。如果是这样，我认为这只是button标签的一个功能。当我将鼠标悬停在按钮上时，它会突出显示蓝色，但我的光标不会改变，就像我将鼠标悬停在链接上时一样。

如果你在按钮中抛出a href标签，当你将鼠标悬停在按钮的文本上时，你会得到光标。但是，当光标位于按钮内的空白区域时，按钮仍然会突出显示按钮。

另外，您使用的链接是什么？如果您尝试使用该按钮在某处发送信息，则可能需要使用URL标记内的button属性，而不是超链接按钮。

Answer 2

您不应将<button>放在<a>标记

中

只需使用<button></button>并使用您为按钮标记编写的相同样式，因此它应该是这样的：

button {
  display: block;
  margin: 0 auto;
}

如果您必须使用错误的标记并将按钮保留在<a>标记内只需将标签包装在div标签内，并将样式更改为以下

<div>
<a href="">
    <button>A Button</button>
</a>
</div>

和样式：

a{
    display: inline-block;
    margin: 0 auto;
}
div{
    text-align: center;
}
button{
}