代码之家 › 专栏 › 技术社区 › Sam JvdBerg

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

css html

Sam JvdBerg · 技术社区 · 11 年前

我正在建立一个具有标准导航功能的响应式网站。每个 <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> ?

4 回复 | 直到 11 年前

Stewartside 11 年前

尝试更改 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

Paulie_D 11 年前

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

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

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

Manish Pradhan 11 年前

你可以这样做:

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

Community Mohan Dere 9 年前

读了一些 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小时内解决这个问题,看看你的想法。

谢谢你的帮助。