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

或参见Here

Answer 3

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

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

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

3 个答案: