Html 在列表项之间居中对齐背景图像

我正在建立一个具有标准导航的响应性网站。每个

元素都有一个背景图像：

CSS

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: left;
    background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
    background-size: 10%;
}

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: left;
}
li a {
    float: left;
    display: block;
}
li div {
    min-height: 20px;
    background: url(http://bit.ly/1wxK23y) no-repeat center;
    overflow: hidden;
}

HTML

<div class="container">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </nav>
</div>

<div class="container">
    <nav>
        <ul>
            <li><a href="#">One</a><div></div></li>
            <li><a href="#">Two</a><div></div></li>
            <li><a href="#">Three</a><div></div></li>
            <li><a href="#">Four</a><div></div></li>
            <li><a href="#">Five</a><div></div></li>
            <li><a href="#">Six</a><div></div></li>
        </ul>
    </nav>
</div>

一个
两个
三
四
五
六

我的

背景位置

将背景图像大致对齐到每个

的中间

减小视口宽度时，图像不再与中间对齐。当我为每个

使用不同的背景图像时，这一点更为明显

是否有更好的方法将背景图像与每个
之间的空白对齐？
尝试将
背景大小从
10%
更改为
包含


.container{
宽度：960px；
最大宽度：90%；
保证金：0自动；
}
保险商实验室{
宽度：100%；
}
李{
浮动：左；
宽度：16%；
列表样式：无；
文本对齐：左对齐；
背景：url(http://bit.ly/1D60g6m)无重复68%0；
背景尺寸：包含；
}


一个
两个
三
四
五
六

将图像向右移动并将列表文本居中似乎是最可能的选择


.container{
最大宽度：960像素；
宽度：90%；
保证金：0自动；
}
保险商实验室{
宽度：100%；
}
李{
浮动：左；
宽度：16%；
列表样式：无；
文本对齐：居中；
背景：url(http://bit.ly/1D60g6m)无重复0；
背景大小：10%；
背景位置：右中；
}


一个
两个
三
四
五
六

您可以执行以下操作：




一个
两个
三
四
五
六

.集装箱{
宽度：960px；
最大宽度：90%；
保证金：0自动；
}
保险商实验室{
宽度：100%；
填充：0；
保证金：0；
}
李{
浮动：左；
宽度：16%；
列表样式：无；
文本对齐：居中；
位置：相对位置；
}
李：之后{
背景：url(http://bit.ly/1D60g6m)无重复68%0；
背景大小：20%；
内容：''；
宽度：50px；
高度：16px；
位置：绝对位置；
右：-18px；
顶部：2个；
}
读了几篇文章后，我想出了一个解决方案

HTML

<div class="container">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </nav>
</div>

<div class="container">
    <nav>
        <ul>
            <li><a href="#">One</a><div></div></li>
            <li><a href="#">Two</a><div></div></li>
            <li><a href="#">Three</a><div></div></li>
            <li><a href="#">Four</a><div></div></li>
            <li><a href="#">Five</a><div></div></li>
            <li><a href="#">Six</a><div></div></li>
        </ul>
    </nav>
</div>

此方法意味着您不需要使用
文本对齐：居中。将图像定位到右侧并将列表文本对齐到中心是一个很好的解决方案，但如果导航需要与正文内容对齐，则会出现问题

我会让这个答案24小时不解决，看看你怎么想

谢谢你的帮助。
谢谢你，伙计。我没有在真实版本中使用背景大小。这只是为了缩小我从谷歌抓取的箭头图像的大小。文本向左对齐很重要，所以这对我来说不是一个选择。好建议：）回答得好！我认为这是最好的解决方案文本向左对齐很重要，所以这不是我的选择。好建议：）