Question 182192 in Html Question posted in
Some basic documentation can be found here.

HTML elements in the browser appearing as inline instead as block elements

My following code for a simple webpage on the browser:

The buttons on the webpage show up as inline elements instead of of one on top of the other consecutively. Happens as well with using flexbox. Items within the container become inline without stating display: flex-inline.

enter image description here

<h1 id="id1">My Heading 1</h1>

<p id="demo"></p>

<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
    Click Me!</button>

<button onclick="displayDate()">Try it</button>

I tried adding a <br> tag

Tags:

3

Answers


  1. 0

    <button> is not a block element. To stack them on top of each other,

    1- one way is to wrap them in <div>s

     <h1 id="id1">My Heading 1</h1>

    <p id="demo"></p>
<div>
    <button type="button" 
    onclick="document.getElementById('id1').style.color = 'red'">
    Click Me!</button>
</div>
<div>
    <button onclick="displayDate()">Try it</button>
    </div>

    2- Another is to use display: block style on them.

    <button style="display: block" />

    3- Or to wrap both of them in a <div> with display set to flex and flex-direction to column

    <div style="display: flex; flex-direction: column">
    <button />
    <button />
</div>
    Login or Signup to reply.
  2. 0

    By default, buttons have a display of inline-block. If you want to change that, explicitly set the display.

    button {
    display: block;
}
    Login or Signup to reply.
  3. 0

    Buttons are inline elements (well, inline-block) by default.

    When you make an element display: flex or display: flex-inline its children are arranged in a row (by default) or column (if you specify flex-direction: column).

    The difference between flex and flex-inline is how the parent element is rendered, not the children.

    If you want the buttons displayed on consecutive lines then you can:

    • use a <br> between them (without involving flexbox) or
    • put each on in a separate block element such as a <div> (also without involving flexbox) or
    • numerous other options

    I can’t infer the semantics of your data (largely because it seems to be a mishmash of demo elements and not a straight-forward text) so I can’t comment on which option(s) would be appropriate.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search