How to horizontally inline buttons inside a div?

Question

The code I have now is the following:

<div id="bint">
  <button id="ButtonA">
    Option A
  </button> 
  <button id="ButtonB">
    Option B
  </button>
</div>

This code won't align the buttons unless I remove the div tag. What is the easiest way to put them in line?

Insert please the full example of code snippet. Because for now it works fine for me, buttons are in one line. — Irina, Sep 17 '18 at 17:48

score 1 · Answer 1 · answered Sep 17 '18 at 18:12

By default the buttons are align in inline-block, so they will appear horizontally. If you want to present them vertically you sould set a css rule to diplay: block. You can see more information in the follow link: Which display mode do HTML buttons have?

score 0 · Answer 2 · answered Sep 17 '18 at 18:32

0

I would check out CSS Flexbox, take a look at this Flexbox generator to help you understand it better.

answered Sep 17 '18 at 18:32

RiddleMeThis

1,345
4
16
29

How to horizontally inline buttons inside a div?

2 Answers2