div 不允许作为按钮的子元素

Question

我已经阅读了有关此的几个主题，但仍然不明白有效的替代方案。从视觉上看，它看起来就像我想要的那样，但我收到验证错误，并且我不知道如何更改它。这是我正在使用的一个简单版本：

<button type="submit" onclick="window.location.href='events.html'">
    <div id="box1" class="eventContainer">
    <h3>CLICK ON ME!</h3>
    <p>Description</p>
    <img>
    </div>
</button> 

Answer 1

问题是按钮只能包含内联元素，而 div 是块元素。替代方法是使用跨度

<button type="submit" onclick="window.location.href='events.html'">
    <span id="box1" class="eventContainer">
       <h3>CLICK ON ME!</h3>
       <p>Description</p>
       <img>
    </span>
</button> 

块级元素 块级元素始终从新行开始并占据可用的全部宽度（尽可能向左和向右延伸）。

该元素是块级元素。

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>

内联元素内联元素不会从新行开始，并且仅占用所需的宽度。

这是段落内的内联元素。
内联元素的示例：

<span>
<a>
<img>

<div> 元素

该元素是块级元素，通常用作其他 HTML 元素的容器。

该元素没有必需的属性，但样式和类是通用的。

当与 CSS 一起使用时，该元素可用于设置内容块的样式：

例子

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

更多信息可以在这里找到