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

我似乎无法增加菜单项之间的间距。应该调整什么来实现这一点？

- codacopia

---

使用 inline-block 替代 inline？ - davidpauljunior

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;

- CRABOLO

---

我尝试了 margin: 21px auto; 但是这会把菜单推到左边。有什么方法可以以响应式的方式居中菜单项？ - codacopia

Answer 2

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

将您的CSS更改如下：

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

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

或者在这里查看Here

- Ajay Gupta

Answer 3

不要试图操纵列表项，尝试将填充添加到锚点。例如：

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

- Benjamin