如何在<li> </li>内的跨度内移动文本

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代表文字“设计目标”。

是否有某种方法可以按下背景图像或向上推 文本，以便我可以让他们排队更多。我尝试添加填充 和跨度的余量，但似乎不起作用。我也试过了 行高的不同组合，但也不起作用。

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

             iii
       xxxxxxiiixxxxxx
       xxxxxxxxxxxxxxx

Answer 1

使用 background-position 。

例如：

background-position: center 100px;

Answer 2

使用Div而不是Span，因为span默认显示属性是内联的，div显示属性是block。如果你想推高文本，那么首先给出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;
}

See Demo

在这里我分割图像所以只有它来到文本下面或使用span显示属性作为块来下载文本和图像作为第一个Reference

Answer 3

将样式应用于列表元素：

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

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