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

Question

这是 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>

这是 CSS:

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

我似乎无法增加菜单项之间的空间。为此我应该调整什么？

Answer 1

尝试

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

---

编辑

你想要这样的东西吗？ http://jsfiddle.net/Y8Ng7/

只需删除导航的可笑边距并增加 li 内边距

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

要使 div 元素居中，不要执行 margin: 21px 646px 21px 646px;

只是做 margin: 21px auto;