У меня проблема, какое-то время я пытался выяснить, как решить эту проблему. Я опишу его очень хорошо ниже...
Я пытаюсь использовать изображение в качестве спрайта для списка UL. Он должен показывать значок рядом с ним, и значок, и текст должны быть связаны где-то.
В моем первом примере посмотрим, как я хочу, чтобы это было. Если для параметра font-size установлено значение 10px, оно выглядит нормально...
Как только я изменяю font-size от 10px до 16px...
Вот CSS и HTML
CSS
#post-meta-wrapper{
list-style: none;
margin:20px 0 20px 20px;
width:400px;
}
#post-meta-wrapper li {
width:100%;
color: #44495B;
border-top: 1px dotted #CCC;
color: #999;
font-size: 10px;
line-height: 28px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
}
#post-meta-wrapper li a{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
padding-left:15px;
}
#post-meta-wrapper .meta-img {
background:#fff;
width: 15px;
height: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 8px;
overflow: hidden;
}
#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
width: 15px;
height: 10px;
}
HTML
<ul id="post-meta-wrapper">
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#" class="active"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
</ul>
Примеры JSFiddle
Это первая с font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/
Это MESSED UP с font-size: 16px
http://jsfiddle.net/jasondavis/Mt87G/5/
Помогите мне?
Хорошо. Я знаю, что могу просто изменить изображение спрайта, чтобы иметь огромные пространства вокруг каждого объекта на изображении, и тогда вы не заметили бы эту проблему, но я бы очень хотел, чтобы эта проблема была решена правильно. Я имею в виду, можно ли делать то, что я пытаюсь сделать только с помощью CSS, или изображение должно быть разнесено? Я видел другие изображения спрайтов, где они находятся рядом, как у меня, и я видел некоторые места, где все походит на 100 пикселей.
Пожалуйста, помогите мне, если вы знаете, как разрешить это, я пробовал все, о чем я могу думать без везения. Мне нужно сделать это в массовом масштабе, поэтому я хотел бы сделать это правильно сейчас, прежде чем я это сделаю. Спасибо за любую помощь
