CODEWITHSUNDEEP
cssbutton
Loryan
Loryan

Reputation: 13

Style buttons to be next to each other using CSS

So, I am new to programming (3rd day) and I got a problem with my buttons.

The thing is I want each button to be next to other, not above.

I have tried using all kinds of position. But none of them works.

My css:

#about {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

#forum {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

#shop {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

Html:

<ul>
    <div id="about"><a href="/about/">About</a></div>
    <div id="forum"><a href="/forums/">Forums</a></div>
    <div id="shop"><a href="/shop/">Shop</a></div>

</ul>

What am I doing wrong? (Sorry for my bad english).

Upvotes: 1

Views: 83

Answers (2)

EdwardB
EdwardB

Reputation: 76

Since you are using the same style on all the elements, you can use a class instead of id.

HTML

<input type="button" class='classname' />
<input type="button" class='classname' />
<input type="button" class='classname' />

CSS

.classname {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: inline-block;
}

That you need to change is:

display: block;

To

display: inline-block;

Upvotes: 1

Patrick Beeson
Patrick Beeson

Reputation: 1695

I'm guessing your buttons are being centered in a column on the page currently.

Try this:

HTML

<ul id="button_list">
    <li class="button" id="about">About</li>
    <li class="button" id="forum">Forum</li>
    <li class="button" id="shop">Shop</li>
</ul>

CSS

#button_list {
    padding-left: 0px;
}

#button_list li {
    list-style: none;
    display: inline;
    margin-right: 10px;
}

Fiddle: http://jsfiddle.net/patrickbeeson/v9307r0f/

Upvotes: 1

Related Questions