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>的中间对齐。

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以这样做：

https://jsfiddle.net/j0c1w162/7/

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

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
    padding:0;
    margin: 0;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: center;
    position: relative;

}
li:after{
    background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
    background-size: 20%;
    content: '';
    width: 50px;
    height: 16px;
    position: absolute;
    right: -18px;
    top: 2px;
}

Answer 4

从this answer读完一些内容后，我想出了alternative solution。

<强> 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小时内将此答案解决，以了解您的想法。

感谢您的所有帮助。

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

4 个答案: