html - 如何在跨度内移动文本

Question

我有以下内容：

<li>
<a class="dw"><span>Design Goals</span></a>
</li>

.dw {
   background-image: url(/Content/images/icons/fugue/document-globe.png);
}

在我的浏览器中查看时，我看到类似这样的内容

iii
iii  xxxxxxxxxxxxxxx
iii  xxxxxxxxxxxxxxx

我代表图像和 x 文本“设计目标”。

有什么方法可以让我向下推背景图像或向上推文本，这样我就可以让它们排列得更多。我尝试向跨度添加填充和边距，但这似乎不起作用。我也尝试了不同的 line-height 组合，但这也不起作用。

我试过： background-position: center 但它看起来像这样：

             iii
       xxxxxxiiixxxxxx
       xxxxxxxxxxxxxxx

score 2 · Accepted Answer

2

例如：

background-position: center 100px;

于 2013-01-03T09:40:32.173 回答

score 0 · Accepted Answer

使用 Div 代替 Span 因为 span 默认显示属性是内联的，div 显示属性是块。如果要向上推文本，请先给出 span 标签。

html

<li>
<span>Design Goals</span>
<div  class="dw" ><img src='http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg'><div>
</li>

css

.dw {
height: 100px;
width: 200px;
}

在这里，我拆分图像，因此只有它出现在文本下方或使用跨度显示属性作为块来获取文本和图像作为第一个参考

score 0 · Accepted Answer

将样式应用于列表元素：

li {
    background-image: url(http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg);
}

<li><a href="#">Design Goals</a></li>

3 回答 3