css - 向导航分隔符添加边距

Question

作为 css 的新手，我发现了第一个问题。我很确定这是一些基本的东西，如果有人能至少给我一个我应该朝哪个方向移动的提示，我将非常感激。我想我可能只是走错了方向。

问题:

我得到了带有一些分隔符和翻转的导航。问题是我似乎无法添加分隔符和 li 悬停之间的左边距。分隔符始终坚持悬停。添加右边距效果很好，但当我尝试添加左边距时，它只会使右边距的大小加倍。

这是图片:http://bit.ly/OQTMda

#nav {
    position: absolute;
    top: 200px;
    width: 946px;
    height: 46px;
    padding: 7px;
    background: url('images/nav_bg.gif') top left repeat-x;
    }

#nav li {
    list-style: none;
    float: left;
    line-height: 46px;
    margin-right: 7px;
    }

#nav li:hover {
    background: url('images/nav_hover.gif') top left repeat-x;
    }

#nav li + li {
    background: url('images/separator.gif') top left no-repeat;
    }

#nav a {
    margin-left: 35px;
    margin-right: 35px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    }

感谢您提供的任何建议。提前致谢!

Answer 1

避免使用 margins - paddings - line-heights 设计 li 元素。而是为您的内部 a 元素设置样式以获得更好的结果。

始终考虑 li 元素，例如对齐的粗体框来容纳您的设计