html - 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 是 block 元素。另一种方法是使用跨度

<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> 

block 级元素 block 级元素总是从新的一行开始，并占据可用的整个宽度(尽可能向左和向右延伸)。

该元素是 block 级元素。

Examples of block-level elements:

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

---

内联元素 内联元素不在新行开始，只占用必要的宽度。

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

<span>
<a>
<img>

元素

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

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

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

例子

<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>

可以找到更多信息 here