4

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>
Zachiah
  • 1,750
  • 7
  • 28
Tal Angel
  • 1,301
  • 3
  • 29
  • 63
  • 1
    you should not add button tag inside another button tag. It is wrong syntax – Shrinivas Pai Sep 21 '15 at 15:35
  • 1
    But that works in WPF... – Tal Angel Sep 21 '15 at 15:36
  • It might work in some cases, but that's just a flaw of the software. The syntax is what it is about. A button shouldn't contain buttons. Try to use other elements. Maybe canvas? ;) (I don't exactly know what you're creating, maybe a simple div would stand) – Matthijs van Hest Sep 21 '15 at 15:41
  • Related, with some info about nested buttons: [can-i-nest-button-inside-another-button](https://stackoverflow.com/questions/39386497/can-i-nest-button-inside-another-button) – kca Mar 15 '22 at 12:25

1 Answers1

1

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/

Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56