Question

我正试图在导航菜单中找到一个分隔符，我发现了'li + li'功能，但是我很难将分隔符放在正确的位置。我试图将它均匀地放在两个占位符中心和所有位置之间。我已经尝试弄乱边距和填充属性而没有运气。

这是一个jsfiddle以及我的代码和一个关于我想要实现的图片示例。非常感谢任何帮助，谢谢。

enter image description here

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>

Answer 1

您可以使用background-size/background-position来定位背景。

在这种情况下，只需使用简写：

UPDATED EXAMPLE HERE

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

Answer 2

我会制作li元素display:block并对左侧和右侧的所有内容应用填充。这样，它们距文本两侧的距离相等

然后在背景图像的垂直位置使用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/

（我使用了一个评论空白的技巧，这样它就不会影响布局.. ）

标题li + li分隔符放置麻烦

2 个答案: