How to display 3 buttons on the same line in css

Question

I want to display 3 buttons on the same line in html  I tried two options   This one         lt div style  width 500px   gt           lt div style  float  left  width  130px  gt  lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt  lt  div gt           lt div style   float  none  width  130px  gt  lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt  lt  div gt           lt div style   float  right  width  130px  gt  lt button class  msgBtnBack  gt Back lt  button gt  lt  div gt       lt  div gt     And this one         lt p style  float  left  width  130px  gt  lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt  lt  p gt       lt p style   float  none  width  130px  gt  lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt  lt  p gt       lt p style   float  right  width  130px  gt  lt button class  msgBtnBack  gt Back lt  button gt  lt  p gt    For the second option I used a styling for the paragraph    lt style gt     p  display inline   lt  style gt    Sadly  none of them were ok  and I can t seem to find out any other option  The first and second button are displayed on same line  but the third is displayed lower    Can you help me

User · Answer

You need to float all the buttons to left and make sure its width to fit within outer container.

CSS:

.btn{

   float:left;
}

HTML:

    <button type="submit" class="btn" onClick="return false;" >Save</button>
    <button type="submit" class="btn" onClick="return false;">Publish</button>
    <button class="btn">Back</button>

User · Answer

The following will display all 3 buttons on the same line provided there is enough horizontal space to display them    lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt   lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt   lt button class  msgBtnBack  gt Back lt  button gt     Note the lack of unnecessary divs  floats  etc     The only reason the buttons wouldn t display inline is if they have had display block applied to them within your css

User · Answer

Here is the Answer   CSS   outer       width 100       text-align  center     inner       display  inline-block      HTML   lt div id  outer  gt     lt div class  inner  gt  lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt  lt  div gt     lt div class  inner  gt  lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt  lt  div gt     lt div class  inner  gt  lt button class  msgBtnBack  gt Back lt  button gt  lt  div gt   lt  div gt    Fiddle

User · Answer

This will serve the purpose  There is no need for any divs or paragraph  If you want the spaces between them to be specified  use margin-left or margin-right in the css classes    lt div style  width 500px   gt       lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt       lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt       lt button class  msgBtnBack  gt Back lt  button gt   lt  div gt

User · Answer

Do something like this   HTML     lt div style  width 500px   gt       lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt       lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt       lt button class  msgBtnBack  gt Back lt  button gt   lt  div gt    CSS    div button      display inline-block      Fiddle Demo  Or  HTML     lt div style  width 500px   id  container  gt       lt div gt  lt button type  submit  class  msgBtn  onClick  return false    gt Save lt  button gt  lt  div gt       lt div gt  lt button type  submit  class  msgBtn2  onClick  return false   gt Publish lt  button gt  lt  div gt       lt div gt  lt button class  msgBtnBack  gt Back lt  button gt  lt  div gt   lt  div gt    CSS     container div      display inline-block      width 130px      Fiddle Demo

[html] How to display 3 buttons on the same line in css

Examples related to html

Examples related to css

Examples related to stylesheet