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

【问题标题】：div not allowed as child element of buttondiv 不允许作为按钮的子元素
【发布时间】：2015-09-10 07:23:30
【问题描述】：

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

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

【问题讨论】：

看来您要解决的问题已在此处得到解答：stackoverflow.com/questions/15885444/…
@tp77 能否提供eventContainer类的css。还用id="box1"?
为什么不使用链接而不是按钮？然后你可以使用块元素作为子元素，它会更容易访问，因为它可以在没有 js 的情况下工作

标签： html

【解决方案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>

元素

该元素是块级元素，通常用作其他 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>

更多信息可以找到here

【讨论】：

h3 和 p 标签不允许在 span 标签内。 h3 和 p 标签是块元素，span 标签是内联元素。 块元素不允许在内联元素中。
您好 OBender，感谢您的回复。我正在尝试创建一个实际上是页面上的按钮的大框。我实际上连续有3个盒子。每一个按钮。当我更改为跨度时，我得到的错误是现在 h3 或 p 等不能是跨度的子级。 :( 我不知道该怎么做。
@AlbertoI.N.J.有趣的事实。你能提供一个来源吗？
@SungWonCho 这是link。在内容模型下。

【解决方案2】：

我不确定，您看到了什么验证错误。我从您的代码中创建了一个最小示例，它是有效的。（检查https://validator.w3.org/check）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Button</title>
</head>
<body>
<form method="post" action="http://example.com/form/">
<button type="submit" onclick="window.location.href='events.html'">
    <div id="box1" class="eventContainer">
    <h3>CLICK ON ME!</h3>
    <p>Description</p>
    <img src="http://example.com/button.png" alt="my button">
    </div>
</button> 
</form>
</body>
</html>

【讨论】：

块元素不允许在内联元素中。在这种情况下，button 和 img 标签是 inline elements 而 div, h3 和 p 标签是 块元素。所以，还是无效的。
尝试用 html5 验证它，你会看到错误