Html 无法使用 CSS 增加水平菜单项之间的间距

Having trouble increasing spacing between horizontal menu items with CSS

提问by codacopia

Here is the HTML:

这是 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>

Here is the CSS:

这是CSS：

li {
    display:inline;
    padding: 10px;
}
#menu {
    margin: 21px 646px 21px 646px;
}

I cannot seem to increase the space between the menu items. What should I adjust to do so?

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

回答by CRABOLO

try

尝试

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

---

---

edit

编辑

Do you want something like this ? http://jsfiddle.net/Y8Ng7/

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

Just remove that ridiculous margin you have for the nav and increase the li padding

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

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

To center a div element, don't do margin: 21px 646px 21px 646px;

要居中一个 div 元素，不要做 margin: 21px 646px 21px 646px;

just do margin: 21px auto;

做就是了 margin: 21px auto;

回答by Ajay Gupta

You just need to add display:inline-block;in list menu.

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

Change your CSSlike below :

在CSS下面更改您的喜好：

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

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

Or See Here

或者看这里

回答by Benjamin

Rather than trying to manipulate the list items, try adding your padding to the anchor. Ex:

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

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