logo标签列表

标题：头部菜单栏中li与li之间的分隔符定位问题

htmlcss
3
我正在尝试在我的导航菜单中添加一个分隔符，我发现了“li + li”功能，但是我很难把分隔符放在正确的位置。我想要将其均匀地放置在两个占位符之间且居中。我已经尝试使用margin和padding属性进行调整，但没有成功。
这是一个jsfiddle，其中包含我的代码和我要实现的效果的图片示例。非常感谢任何帮助。谢谢。

enter image description here

http://jsfiddle.net/jzcZ4/

HTML / CSS

<style>

body {
    margin: 0;
    color:white;;
}

#header {
    background-color: #1c2024;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}

#header ul {
    margin: 0;
}

#header li {
    display:inline;
}

#header li + li {
    background:url('http://i.imgur.com/IdVT0cL.png') no-repeat;
    padding-left: 20px;
    padding-right: 20px;
}

</style>

</head>

<body>
    <div id="wrapper">
        <div id="header">
            <ul>
                <li>odsfjkoj</li>
                <li>odsfjkoj</li>
            </ul>
        </div>
    </div>
</body>
2
为什么不直接使用定义颜色的边框？在这种情况下，图像是无用的。您可以使用border-right: 1px solid #666;和li:last-child border: none;规则。 - Dmitry Sikorsky
2个回答
2
我从未知道背景属性有位置/大小这样的东西。每天学点新东西真好。虽然我不得不调整位置以适应我的需要，但它完美地工作了。谢谢！ :) - ErraticFox
0

我会让 li 元素的 display:block，并在左右两侧应用 padding。这样它们就与文本两侧的距离相等了。

然后在背景图像的垂直位置使用 50%。

#header li {
    display:inline-block;
    padding: 0 20px;
}

#header li + li {
    background:url('http://i.imgur.com/IdVT0cL.png') 0 50% no-repeat;
}

http://jsfiddle.net/gaby/jzcZ4/1/

(我使用了一种技巧，将空格注释掉，以便不影响布局..)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接