Html 我可以将按钮嵌套在另一个按钮中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39386497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I nest button inside another button?
提问by AndrewMk
This is a problem resulting from trying to keep my html semantics as correct as possible.
这是由于试图保持我的 html 语义尽可能正确而导致的问题。
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
我有一个父按钮，它在同一页面中执行两个功能，并充当嵌套锚点的大容器的父标记 - 重定向到另一个页面 - 以及一个 div 标记，它也充当另一个按钮的父级那是假设执行一些操作。
<button>
<div id="the-most-big-container"
<a href="http://www.RedirectMeToAnotherPage.com"></a>
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
我尝试嵌套按钮，给它一个类和 id，我应用到类的任何属性和 id 都没有在子按钮上执行，而且子按钮完全脱离大容器并放置在DOM 就像它是一个完整的独立标签，没有被任何其他标签嵌套。
[Update]
[更新]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
显然，禁止将按钮嵌套在另一个按钮中，但此外，我想解释一下为什么嵌套按钮的行为不响应 css 样式，以及它现在对 DOM 的定位如何，现在是完全独立的吗？标签本身还是什么？
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag ex: I could change the parent button into a div tag,
此外，现在我将被迫将父按钮标签更改为任何其他标签，以便我可以在其中嵌套子按钮。我想为父按钮标签提供替代标签的建议，例如：我可以将父按钮更改为 div 标签，
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
但我需要一个在语义上更具描述性的标签（不仅仅是一个 div），我首先将父按钮用作切换按钮，以便当我单击它时它会显示并隐藏最大的 -容器div。
采纳答案by web-tiki
It is not validto put a <button>inside a <button>element.
In the W3C recomendation for the button element you can read:
将 a<button>放在<button>元素内是无效的。
在按钮元素的 W3C 推荐中，您可以阅读：
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org]
内容模型：
短语内容，但必须没有交互式内容后代。[来源：w3.org]
Interactive contentincludes:
互动内容包括：
- a
- audio (if the controls attribute is present)
- button
- embed
- iframe
- img (if the usemap attribute is present)
- input (if the type attribute is not in the hidden state)
- keygen
- label
- object (if the usemap attribute is present)
- select
- textarea
- video (if the controls attribute is present)
- 一种
- 音频（如果存在控件属性）
- 按钮
- 嵌入
- 内嵌框架
- img（如果存在 usemap 属性）
- 输入（如果 type 属性不处于隐藏状态）
- 注册机
- 标签
- 对象（如果存在 usemap 属性）
- 选择
- 文本区
- 视频（如果存在控件属性）
回答by Bender
You can not do this. A button is not meant to contain other elements. However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
你不可以做这个。按钮并不意味着包含其他元素。但是，您可以设置 div 元素的样式以具有按钮的外观和感觉，以下是引导程序的外观：
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>