使用CSS增加水平菜单项之间的间距时遇到问题

Question

Here is the HTML:

<div id="menu">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>

Here is the CSS:

li {
    display:inline;
    padding: 10px;
}
#menu {
    margin: 21px 646px 21px 646px;
}

I cannot seem to increase the space between the menu items. What should I adjust to do so?

Answer 1

try

a { 
    display: block;
    padding: 10px 30px;
}

---

edit

Do you want something like this ? http://jsfiddle.net/Y8Ng7/

Just remove that ridiculous margin you have for the nav and increase the li padding

li {
    display:inline;
    padding: 10px 40px;
}

To center a div element, don't do margin: 21px 646px 21px 646px;

just do margin: 21px auto;

Answer 2

You just need to add display:inline-block; in list menu.

Change your CSS like below :

li {
   display:inline-block;
   padding: 10px;
}

#menu {
    margin: 21px 646px 21px 646px;
}

Or See Here

Answer 3

Rather than trying to manipulate the list items, try adding your padding to the anchor. Ex:

#menu li a { padding: 10px; display: block; }