Question

我有一个图标集，它使用CSS类来相应地显示它们。就像说：

<div class="icon anchor">This is some text!<br>This is some text!</div>

这将显示图标，但由于图标是背景图像，因此必须将文本移到一边，以腾出空间，使文本不会覆盖图像。这就是我的问题所在。文本被移到一边，但所有文本被移到一边。我只想要移动需要（可能是第一行）。这是我的CSS：

.icon {
    background-repeat: no-repeat;
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

Answer 1

如果要缩进第一行文本，则正确的CSS属性是text-indent属性。它将左边距（或从右到左语言的右边距）设置为任何块容器的第一行。在这种情况下，CSS将是

.icon {
    background-repeat: no-repeat;
    text-indent: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

See it in action at jsFiddle

Answer 2

:first-line伪选择器怎么样？即

div.icon.anchor:first-line { ... }

但为什么是<div>而不是<p>（或两个）？

Answer 3

请改为：

http://jsfiddle.net/thirtydot/8uPU5/

<强> HTML：

<div class="icon anchor"><span>This is some text!</span><br>This is some text!</div>

<强> CSS：

.icon {
    background-repeat: no-repeat;
}
.icon.anchor span {
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0b/Vovinam_azzurro_16x16.gif);
}

CSS仅对第一行应用保证金

3 个答案: