CSS 只对第一行应用边距

发布于 2024-10-20 09:37:31 字数 462 浏览 3 评论 0原文

我有一个图标集，它使用 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); 
}

原文

I have an icon set that uses CSS classes to display them accordingly. Like, say, this:

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

This will display the icon, but since the icon is a background image, the text has to be moved aside, to make room so that the text isn't going over the image. That's where my problem is. The text is moved aside, but all the text is moved aside. I only want what needs(probably the first line) to be moved. This is my CSS:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤城病女 2024-10-27 09:37:31

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

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

在 jsFiddle 上查看它的实际效果。

If you want to indent the first row of text, then the proper CSS-property is the text-indent property. It will set the left margin (or right margin in right-to-left languages) to the first line of any block container. In this case the CSS would be

.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.

回复收藏 0 原文

[浮城] 2024-10-27 09:37:31

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

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

但是为什么是

而不是

（或两个）？

What about the :first-line pseudo-selector? i.e.

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

But why is that a <div> and not a <p> (or two)?

回复收藏 0 原文

メ斷腸人バ 2024-10-27 09:37:31

这样做：

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

Do it like this instead:

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

回复收藏 0 原文

~没有更多了~