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

【问题标题】：Having trouble increasing spacing between horizontal menu items with CSS使用 CSS 增加水平菜单项之间的间距时遇到问题
【发布时间】：2014-06-23 17:48:47
【问题描述】：

这里是 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;
}

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

【问题讨论】：

使用inline-block 代替inline?

标签： html css menu margin

【解决方案1】：

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

如下更改您的CSS：

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

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

或见Here

【讨论】：

【解决方案2】：

试试

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

编辑

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

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

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

要使 div 元素居中，不要这样做 margin: 21px 646px 21px 646px;

只要margin: 21px auto;

【讨论】：

我试过margin: 21px auto;，但这将菜单推到了左边。如何以响应式方式将菜单项居中？

【解决方案3】：

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

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

【讨论】：