Html 如何使用按钮元素上的显示：网格？

我希望使用CSS网格为元素设置样式

我知道用户代理样式表有一些默认值，但我找不到合适的样式表来覆盖

它应该是这样的-事实上，如果我设计一个div，它确实是这样的：

但是，按钮的样式如下所示：

以下是我的CSS：

button, .button {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: 80px 1fr;
}

和HTML：

How buttons look:

<button>
  <h1>
    hello
  </h1>
  <h2>
    world
  </h2>
</button>

How divs look, and how I want buttons to look:

<div class="button">
  <h1>
    hello
  </h1>
  <h2>
    world
  </h2>
</div>

我的风格适用于div，但不适用于按钮

---

如何使用CSS网格设置按钮样式？

看来您只需添加一个字体大小来覆盖浏览器默认值，并将h1和h2向左对齐即可。我还建议更新网格模板列：auto1fr；这将允许第一个元素，在本例中，您的h1是需要的任何大小

<button>
  <div class="button">
    <h1>
      hello
    </h1>
    <h2>
      world
    </h2>
  </div>
</button>

---

似乎是复制版的某种缺陷：committeed@Michael_B-一个小注释，关于显示的评论没有参考：网格不是设计用于按钮的，浏览器只是需要并且正在修复它。我完全同意这是个骗局。事实上，迈克，我的答案中包括了这些参考资料。在列出的bug报告中，您会发现：这实际上是HTML规范所要求的，几个HTML容器元素是特殊的，并且有效地忽略了它们的CSS显示值。显示可以应用于子元素，因此没有网格或flex。从重新设置边距、填充和框大小开始：绕过bug，而不是尝试修复它；尝试重新设计元素的样式通常是个坏主意。它们应该是可识别的，以避免欺骗用户。作为浏览器的一部分，这并不能解决问题：对不起，我只是在Firefox中查看。有些浏览器会用按钮做一些奇怪的事情，其中一个奇怪的事情就是Chrome对你的按钮做了什么。我已经更新了我的答案，在你的按钮中添加了div.button，并解决了这个问题。

button {
  margin: 12px;
  padding: 12px;
  font-family: "Helvetica";
  background-color: #999;
  width: 200px;
  border: 1px solid black;
  display: block;
  font-size: 1em;
}

.button {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: auto 1fr;
}

h1, h2 {
  text-align: left;
}