html - 居中对齐列表项之间的背景图像

Question

我正在构建一个具有标准导航的响应式网站。每个<li>元素有一个背景图像，like so :

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%;
}

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>

我的 background-position将背景图像大致对齐到每个 <li> 的中间.

当您减小视口(viewport)宽度时，图像不再与中间对齐。当我为每个 <li> 使用不同的背景图像时，这一点更加明显。 .

有没有更好的方法可以将背景图像与每个 <li> 之间的空白对齐？ ？

Answer 1

尝试将 background-size 从 10% 更改为 contain

.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: contain;
}

<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>

JSFiddle