How to display 3 buttons on the same line in css


Tags: html,css,stylesheet

Problem :

I want to display 3 buttons on the same line in html. I tried two options: This one:

    <div style="width:500px;">
        <div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
        <div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
        <div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div>
    </div> 

And this one:

    <p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p>
    <p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p>
    <p style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></p>

For the second option I used a styling for the paragraph:

<style>
   p {display:inline}
</style>

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?



Solution :

Here is the Answer

CSS

#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

HTML

<div id="outer">
  <div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
  <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
  <div class="inner"><button class="msgBtnBack">Back</button></div>
</div>

Fiddle


    CSS Howto..

    How i can create dynaminc ordered list items with pure css

    How do I get text to go in the middle of a div? [duplicate]

    How to get the effect not to add one more div?

    How do I get my div to overlay on top of other table rows?

    How would I call :parent for this tooltip?

    How to local storage expand/collapse CSS settings

    CSS - How to use “vertical-align : middle” with a table near an image?

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    How to use CSS transition for existing list items to make room for new ones?

    How to style nested element that is styled by its parent already

    Show Content if below specific width

    How do I get rid of this little green box on my HTML/CSS page [closed]

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How are CSS frameworks used?

    How to CSS two vertical cylinders

    How does a GPL license restrict commercial web applications? [closed]

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    How to pass parameters to css classes

    How to apply css to an iframe

    Can someone help me to know how I can make my layout work in small screen using css , css3?

    How to control multiple images for a single background definition

    Color of links not always showing correctly

    How do I force span elements to remain in place between variable length text and an image element?

    How do I write a php function to show class in navigation menu url using php self

    CSS How to use margins with different divs

    How to programmatically apply CSS definitions to the whole page?

    How to add a .css to a .cshtml

    How to let the chrome forget the page scroll position?

    how to decrease space between headings?

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?