Can I nest button inside another button?

前端未结

关注

 2  1497

星月不相逢

This is a problem resulting from trying to keep my html semantics as correct as possible.

I have a parent button that does both a function in the same page, and acts

相关标签:

2条回答

被撕碎了的回忆

2020-11-28 16:31

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:

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

0 讨论(0)

野的像风

2020-11-28 16:32
It is not valid to put a <button> inside a <button> element.
In the W3C recomendation for the button element you can read:

Content model:
Phrasing content, but there must be no interactive content descendant.

[source: w3.org (emphasis mine)]

Interactive content includes:
- 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)
0 讨论(0)
发布评论:

提交评论
- 加载中...