我正在建立一个具有标准导航的响应式网站。每个<li>元素都有背景图片，如下所示：
的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>。
减小视口宽度时，图像不再与中间对齐。当我为每个图像使用不同的背景图像时，这会更加明显<li>。
有没有更好的方法可以使背景图像与每个图像之间的空白对齐<li>？
的HTML
<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>
的CSS
.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;
}
这种方法意味着您无需使用text-align: center;。将图像定位在右侧并将列表文本对齐到中心是一个很好的解决方案，但是如果您的导航需要与正文内容对齐，则会成为问题。
我将在24小时内不解决此答案，以了解您的想法。
感谢您所有的帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句