获取包含在<A>中的按钮，以继承由css- <button>设置样式的周围<button>的样式

Question

我对HTML/CSS越来越熟悉了。我最近了解了css-grid布局(介绍here)，并且一直在使用它来设计我的html按钮的样式，如下图所示：

​

​

我有一些标签和文本输入，但最重要的是，在包含的div中设置display: grid允许1)对齐右侧的3个按钮，2)拥有灰色正方形样式。

然而，一旦我在<A>...</A>中封装了第三个按钮，它就失去了之前的样式，并且我得到了以下代码(行外，缺省为正常的按钮样式)

​

​

如何强制封装在<A>中的按钮显示与以前相同的样式？

我包含了一个显示相同问题的Codepen link。

Answer 1

​

<h1 class="Hello">Hello</h1>
<div class="wrapper">
  <button class="1">Button 1</button>
  <button class="2">Button 2</button>
  <button class="3">Button 3</button>
  <a class="wrapper"><button class="4">Button 4</button></a>

</div>

​

我刚刚尝试将包装器类添加到中，并正确显示。

你也许可以试一下，看看它是否有效。

Answer 2

在<a>标记内具有按钮不是有效的HTML5。

HTML5 Spec Document：a元素可以围绕整个段落、列表、表格等等，甚至整个部分，只要其中没有交互内容(例如，按钮或其他链接)。

但是，添加

a button{
  height: 50px;
}

给你的codepen解决了这个问题。