精灵和文字大小

Question

---

我在http://flexibletheme.tumblr.com/用于学习CSS的网站上创建了一个精灵，但是由于宽度设置为24px，文本会尝试制作一个小的垂直列。

无论如何要让它正常渲染，右边有24px的边距？

Answer 1

您应该将您的精灵放在嵌套的<span>内，而不是将其包裹在链接文本周围。像这样：

<a href="#"><span class="sprite"></span>Sample Link</a>

请确保将精灵浮动到左侧或将其设为display:inline-block;，以便它可以保留宽度和高度，但仍然与链接文字内联。

Answer 2

您应该将元素包裹在侧边栏无序列表和子项周围，而不是在它执行任何操作之前将其关闭：

<aside>
   <ul>
      <li>stuff</li>
   </ul>
</aside>

然后给它一个宽度，或让内容和侧边栏浮动并在之后清除它们。 （我还建议您轻松查看网格等内容。http://978.gs/）

Answer 3

在white-space: nowrap;标记

中写下此a

#links li a{white-space: nowrap;}

Answer 4

如果IE7支持（及以下）不是问题，您可以使用:before伪元素而不添加任何额外的标记：

#links a {
    display: block;
    position: relative;
    padding: 2px 2px 2px 30px;
    min-height: 20px;
    line-height: 24px;
}
#links a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }

否则，请在锚点内添加span，并将a:before替换为a span.icon。

将h2移到ul之外。那是invalid HTML。

Answer 5

沟宽：24px;添加padding-left：24px