горизонтально выравнивать изображения якоря из verticle css спрайт

Question

У меня есть 4 изображения в вертикальном спрайте css, который я хочу, чтобы каждый стал href на моей странице, идущей горизонтально. Начиная с left:250pxtop: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

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

Вы должны добавить дисплей: встроенный блок/блок; в зависимости от того, чего вы хотите достичь, это должно сработать для вас