带有响应子的 HTML 按钮

Question

对于具有响应大小的子项的按钮大小有问题，如果我使用 div，它可以正常工作，我希望使代码与按钮一起工作，而不是让 div 处理 onClick 操作。

我有以下代码，并且 div 大小正确基于子元素，但按钮没有。

<div class="container">
  <div class="item"></div>
</div>

<button class="container">
  <div class="item"></div>
</button>

.container {
  border: 1px solid black;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 0;
  background: red;
}

.item::after {
  display: block;
  content: '';
  padding-top: 66.6%;
}

CodePen showing the issue.

Answer 1

在此上下文中元素 div 不允许作为元素按钮的子元素。 更多解释请点击此链接：stackoverflow