How to align buttons horizontally?

[web_editor]

How to align buttons horizontally? I try to put this stuff, but its not working

overflow: hidden;
    margin-left:auto;
    margin-right:0px;

Here’s the link of full css

Here’s the link of the site where I have two buttons, please see the Calculator link

[Paulie_D]

It’s not clear what you mean but a reduced case in Codepen would be useful.

The buttons seem to be floated to the left so you might need to remove that.

[web_editor]

I remove now the float, but still the button is not display in horizontally

[Paulie_D]

I remove now the float, but still the button is not display in horizontally

With the float removed the margin:0 auto should now centre them

[web_editor]

Yes, it center already, but not horizontally align

[Paulie_D]

not horizontally align

Perhaps you could explain what this means…align to what?

Do you mean next to each other?

[web_editor]

display: inline-block;

I already have that, but still its not working

[__]

@web_editor, Paulie_D and Jerba have both asked you to explain what you mean by “horizontally align.” I would have assumed you were referring to the differences between:

<-- left  <-->  center  <-->  right  -->
<----   j  u  s  t  i  f  i  e  d  ---->

…but your responses seem to indicate you’re talking about something else. Please explain in more detail, so we know what problem you are trying to solve.

[web_editor]

What I mean in horizontally align is I want the two button display in one line only like this

[chrisburton]

Ah. You want them horizontally inline.

.calbutton, .resetbutton {display: inline-block;}

[__]

Yes, but problem is the buttons are each wrapped in separate divs. They need to be adjacent (as they are in your codepen example) for this to work.

<!-- effortless -->
<input type=reset><input type=submit>

<!-- difficult, impractical -->
<div>
    <input type=reset>
    <span></span>
    <div class=clearer></div>
</div>
<div>
    <input type=submit>
    <span></span>
    <div class=clearer></div>
</div>

Do you have control of the markup? It looks like it is programatically generated (e.g., by web publishing software or a plugin of some sort).

[web_editor]

I have that tag already, but the button is still not in-line :\

[__]

I edited my post above to clarify what I meant. Please have a look.

Again, do you have control of the markup? Can you make changes? You don’t need to add anything. You need to get rid of stuff and actually put the buttons next to each other.

As it is, you have a lot of markup that is specifically trying to prevent you from doing this.

[web_editor]

Yes I have the control in markup. I have this

[Author]

Posts