Question

我在css垂直精灵中有4个图像，我希望每个图像在我的页面上成为href水平。从left:250px top:2px开始，每张图片之间填充3px。

CSS

.sprites {
    background:url('/pic/sprites.jpg')no-repeat top left;
    width:36px;
    height:36px;
}
.sprites.sprites.twitter {
    background-position:0px 0px;
}
.sprites.sprites.facebook {
    background-position:0px -46px;
}
.sprites.sprites.google-plus {
    background-position:0px -92px;
}
.sprites.sprites.pinterest {
    background-position:0px -138px;
}
.social {position:relative;left:250px;top:2px;}

我可以弄清楚如何从左侧250px开始，从顶部开始2px，但我无法弄清楚如何将图像水平移动为href'填充为3px

的s

HTML

<div class=social>
<a href="http://www.example.com"><div class='sprites google-plus'></div></a>
<a href="http://www.example.com"><div class='sprites facebook'></div></a>
<a href="http://www.example.com"><div class='sprites twitter'></div></a>
<a href="http://www.example.com"><div class='sprites pinterest'></div></a></div>

Answer 1

你需要添加display：inline-block / block;取决于你想要达到的目标，这应该适合你

从垂直css精灵水平对齐锚图像

1 个答案: