HTML/CSS : getting , 包含在 中，以继承由 css-grid 设置样式的周围 的样式

Question

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

我有一些标签和文本输入，但最重要的是，设置 display: grid在包围div允许右侧的 3 个按钮 1) 排成一行，并且 2) 具有灰色方 block 样式。

但是，一旦我将第三个按钮包裹在 <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>

我只是尝试将包装器类添加到 并且它显示正确，

你可以试一试，看看是否可行