All geek questions in one place

Can I insert a button inside another button?

This is a problem with trying to maintain the correctness of my html semantics.

I have a parent button that performs both functions on the same page and acts as a parent tag for a large container that contains a binding that redirects to another page, and a div tag that also acts as a parent for another button that should perform some actions .

<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 to attach this button, gave it a class and id, and none of the properties that I apply to the class, and the identifier will not be executed on the child button, moreover. The child button will completely exit the large container and lie in the DOM itself, just as it is a complete independent tag, not nested by any other tag.

[Update]

-, , , , , css DOM , ?

, . ex: div,

, (- , div), -, , , , ---.

+4
2

. WC3 :

:
, . [: wc3.org]

:

  • a
  • audio ( )
  • embed
  • iframe
  • img ( usemap)
  • ( type )
  • keygen
  • label
  • ( usemap)
  • textarea
  • ( )
+5

. . , 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>
0

Source: https://habr.com/ru/post/1653981/

More articles:


All Articles