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

以下是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>

我似乎无法增加菜单项之间的空间。我应该如何调整才能这样做？

试试看

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

---

编辑

你想要这样的吗

只需删除导航的荒谬边距并增加li填充

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

要使div元素居中，不要执行

margin:21px 646px 21px 646px

只需做
margin:21px自动
不要试图操纵列表项，而是尝试将填充添加到锚定中。例：

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

您只需要添加
display:inline块在列表菜单中

更改您的
CSS
，如下所示：

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

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

或者参见
使用
内联块
而不是
内联块
？我已经尝试了
边距：21px自动但这将菜单推到了左侧。如何以响应方式将菜单项居中？
li {
   display:inline-block;
   padding: 10px;
}

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