LoadData LoadData - 1 year ago 82
CSS Question

CSS Horizontal list items

So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.

ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;

<ul id="menuItems">
<a href="index.php">Home</a>
<a href="index.php">DJ Profiles</a>

Currently I am unsure of what is causing this issue, how would I go about and resolve it?

Answer Source

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. If you want to see the original answer, check below. The new answer demonstrates how you can add some style to your list.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    /* this fix is needed for IE7- */
    <li> <a href="#">some item</a>

    <li> <a href="#">another item</a>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download