CODEWITHSUNDEEP
htmltags
Tal Angel
Tal Angel

Reputation: 1782

Nested buttons in HTML

I'm trying to show buttons inside a large button in HTML.

I don't understand why the four inner buttons in my HTML code get displayed outside of the parent button.

What am I doing wrong here?

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>Nested Buttons</title>
        </script>
    </head>
    <body>
        <button style="height:750px; width:750px">
            Click here
            <button style="height:50px; width:50px">a</button>
            <button style="height:50px; width:50px">b</button>
            <button style="height:50px; width:50px">c</button>
            <button style="height:50px; width:50px">d</button>
        </button>
    </body>
</html>

Upvotes: 6

Views: 10274

Answers (1)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You should not add button inside another button. It is wrong syntax.

Try to use div instead of button.

<div style="height:750px; width:750px; border:1px solid black;">Click here
<button style="height:50px; width:50px">a</button>
<button style="height:50px; width:50px">b</button>
<button style="height:50px; width:50px">c</button>
<button style="height:50px; width:50px">d</button>
</div>

Demo Here: https://jsfiddle.net/swpm3aL1/3/

Upvotes: 1

Related Questions