1

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

任何建议表示赞赏。提前致谢！

4

2 回答 2

1

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

始终考虑li诸如对齐粗鲁的盒子之类的元素来容纳您的设计

于 2012-08-22T10:59:54.273 回答
0

试试这个

#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;
    }
于 2012-08-22T12:33:47.657 回答