使用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;

Answer 2

你只需要添加display:inline-block; 在列表菜单中。

像下面这样更改你的CSS ：

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

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

或者看到这里

Answer 3

尝试将填充添加到锚点，而不是尝试操作列表项。 例如：

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