为什么 <button> 元素不能包含 <div>？

问题描述 投票：0回答：6

我的公司正在构建一个网站，我们遇到了一些 JavaScript 库无法替换某些内容的问题。我们决定将 HTML 放入 W3C 验证器，它告诉我们在 

<div>
标签内包含 
<button>
标签是非法的。

<button class="button" type="submit">
    <div class="buttonNormalLargeLeft"><!--#--></div>
    <div class="buttonNormalLargeCenter">Search Flights</div>
    <div class="buttonNormalLargeRight"><!--#--></div>
</button>

结果：

Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

编辑：澄清我们在这里想要做什么。我们想要制作一个不依赖于

box-radius
的圆角按钮。我们在按钮元素中创建了 3 个 div，每个 div 都有自己的精灵，使其显示为圆形并允许不同的宽度。其他资源指出，按钮元素是为希望按钮包含图像等子元素的用户创建的，但 div 由于某种原因似乎无效。

为什么按钮元素中不允许有 div？

此问题所需的解决方案是什么？

编辑2：

为什么不使用输入法？因为输入无法具有所需的布局

为什么不使用div？因为没有 JavaScript 的用户将无法提交表单。

html w3c-validation
6个回答
4
投票

好吧，我发表了评论，但没有爱。

只需将图像放入按钮即可实现 W3C 有效按钮。

小提琴

当然，您必须创建图像并向其中添加文本。但由于您已经为角创建了图像，所以应该不会太难。

此外，图像精灵也是一件很棒的事情。

.test {
  width: 258px;
  height: 48px;
  background: none;
  border: 1px solid transparent;
}
.test:active {
  outline: 0;
}
.test > img {
  width: 258px;
  height: 45px;
  opacity: 1;
  background: url('http://www.copygirlonline.com/wp-content/plugins/maxblogpress-subscribers-magnet/lib/include/popup1/images/btn/blue-button.png');
  background-position: -3px 0px;
}
.test > img:hover {
  background-position: -3px -50px;
}
<button class="test">
  <img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>

如果您想坚持使用 3 张图片，这里有更新版本。

button {
  margin: 0;
  padding: 0;
  border: none;
}
<button>
  <img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" />
</button>

此外，如果没有额外的 CSS，您似乎需要将所有 

<img />
标签保留在同一行，否则会将图像视为图像之间有空格。

4
投票

根据 HTML 标准，

<button>
只能包含短语内容。 
div
元素不是短语内容的有效元素。

2
投票

如果您想使用自定义按钮，则必须将按钮标签替换为 div 或 input。在这种情况下，看起来 div 就是您想要的。您只需添加任何必要的事件处理程序（用于您的提交）。

这可能有助于澄清一些事情。

1
投票

如果您使用的是表单，则可以将按钮更改为可点击的 div。例如：

<div role="button" onclick="$(this).closest('form').submit()">
    <!-- your child content here -->
</div>

或者，如果您知道表单名称或 ID，您可以将内联 javascript 更改为类似 

document.getElementById("form-id").submit()

0
投票

Suuuuper 老问题，但因为我自己在搜索这个答案时发现了它，所以你可以通过轻微的 html 重新结构和一些简单的 CSS 来实现这一点。使按钮成为父 div 的最后一个子级，使其覆盖 div，并使其透明。

我假设您在 9 年前完成了您的网站，但无论如何我都会完整解释这一点，以防其他人在另外 9 年内偶然发现这一点。

HTML

<div class="buttonParent">
    <div class="buttonNormalLargeLeft"><!--#--></div>
    <div class="buttonNormalLargeCenter">Search Flights</div>
    <div class="buttonNormalLargeRight"><!--#--></div>
    <button class="button" type="submit"></button>
</div>

CSS

.button{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

您还可以使用 opacity: 0 来代替透明背景和无边框，但这会消除您使用 Tab 键切换到它的能力。

您仍然可以访问按钮本身的 

.button:hover
、
.button:active
和 
.button:focus
，例如，可以使用它们为按钮本身添加不透明度非常低的背景，以实现简单的悬停效果。

或者，如果您想进一步深入，您可以直接在父对象上添加或替换类，这将允许您覆盖以前的类并对按钮的显示执行任何您想要的操作。

非 JS

<button class="button" 
onclick="this.parentElement.classList.replace('buttonParent', 'buttonParentClicked')" 
onblur="this.parentElement.classList.replace('buttonParentClicked', 'buttonParent')"
type="submit"></button>

例如，

".buttonParentClicked .buttonNormalLargeLeft"
将覆盖
.buttonNormalLargeLeft
的CSS，因此您可以使用它来完全更改那里的图像和样式。

当然，如果这还不够，并且您需要父级上的更多功能，您可以使用 JS 做任何您想做的事情。

HTML

<button class="button" onclick="myFunction()" type="submit"></button>

JS

myFunction(e){
    const parent = e.target.parentElement;
    //whatever you want to parent;
}
0
投票

对于任何在 2024 年读到这篇文章的人……说真的，别担心。 90% 的互联网网站都是“无效的 HTML”。在 Chrome、Firefox、Safari、Edge 中测试您的网站。运行可访问性测试，确保这些测试有效，不会奇怪地重复某些事情，等等。如果您喜欢在 Opera 和 Brave 中进行测试。大多数按钮在大多数浏览器中都可以与 div 配合使用。请记住，我们的目标是让您的产品上市，任何广泛使用的浏览器都不会对您不完美的 HTML 表示不满，而且即使有的话，也几乎不会影响您的 SEO 得分。所以，就发货吧，我的朋友。稍后再清理：这是一个崇高的目标，完美的 HTML，但请记住我们从事的是一个不光彩的职业。只需测试它，交付它，继续你的生活。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.