Question

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

问题：

我通过一些分隔符和翻转来获得此导航。问题是我似乎无法添加分隔符和li悬停之间的左边距。分离器始终粘在悬停上。添加右边距可以正常工作，但是当我尝试添加左边距时，它只会使右边距的大小加倍。

#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

避免使用边距样式li元素 - 填充 - 行高。而是设置内部a元素的样式以获得更好的结果。

始终考虑li元素，例如对齐粗鲁的盒子来保存您的设计

Answer 2

试试这个

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

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

向导航分隔符添加边距

2 个答案: