我已经阅读了几个关于此的主题,但仍然不明白有效的替代方案。视觉上它看起来就像我想要的那样,但我收到验证错误并且我不知道如何更改它。这是我正在使用的一个简单版本:
<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>
最佳答案
问题是按钮只能包含行内元素,而 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
关于html - div 不允许作为按钮的子元素,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/31020667/
该元素是 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
关于html - div 不允许作为按钮的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31020667/