Search code examples
htmltags

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

  • 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/