CSS仅将保证金应用到第一行

我有一个图标集，它使用CSS类来相应地显示它们。像，说，这样的：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); 
}

来源

2011-03-06 Tanner Ottinger

像这样做，而不是：

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); 
}

来源

2011-03-06 06:22:13 thirtydot

这是一个正确的答案，但不完全是我在找的东西。但它指出了我的正确方向。这个想法是，你并不需要知道第一行是什么。只需按容器方式将第一行对齐即可。 – 2011-03-06 06:33:11

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

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

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

来源

2011-03-06 06:20:15

如果你想缩进第一行文本，那么恰当的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。

来源

2011-03-06 06:26:31

+1，这比我的回答更清洁。 – thirtydot 2011-03-06 06:35:24

CSS仅将保证金应用到第一行

回答

相关问题