Style buttons to be next to each other using CSS - css

Question

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">About</div>
<div id="forum">Forums</div>
<div id="shop">Shop</div>
</ul>
What am I doing wrong? (Sorry for my bad english).

Answer 1

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;

Answer 2

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/