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