2

我使用<div>标签在我的页面中插入图标​​：

<div class="icon warning"></div>There is a warning in the page

问题是图标太靠近文本：

在此处输入图像描述

这是图标的代码：

div.icon{
    display:inline-block;
    width:16px;
    height:16px;
    background-color:transparent;
    background-image:url(/images/icons.png);
    background-repeat:no-repeat;
    vertical-align:text-top;
    background-position:0 0;
}

div.icon.warning{
    background-position:-48px 0;
    cursor:help;
}

只有当图标后面跟着一些文本时，我才想在图标和文本之间放置几个像素的距离。换句话说，如果图标后面没有文字，我不想要那个空间。换句话说，对于以下代码，我希望 div#icon1 和文本“页面中有警告”之间有 5px 的距离，但我不希望 div#icon2 和后面的元素之间有任何距离：

<li><div id="icon1" class="icon warning"></div>There is a warning in the page</li>

<li><div id="icon2" class="icon warning"></div></li>

请注意，图标并不总是出现在<li>元素中，因此您建议的选择器不能依赖于图标可能出现的上下文。关于图标唯一可以确定的是，如果它们后面跟着一些文本，它们和文本之间必须有一些空间。

4

3 回答 3

2

您可以将文本包装在 a 中span并对其应用填充：

<div class="icon warning"></div><span class="warning-text">There is a warning in the page</span>

.warning-text {
  padding-left: 5px;
}

更新： 根据下面的评论，我决定从 usingspan而不是div. 可以使用div, 但带有附加display: inline; CSS属性。

于 2012-05-07T09:15:36.910 回答
1

如果您愿意稍微重组您的标记（不添加任何额外的大小）：

http://jsfiddle.net/8kcQv/

关键线是：

.icon:empty{ padding-left: 20px; }

这适用于 IE 9、Chrome 等。其他浏览器会在空元素之间添加额外的空间。这是一个替代版本，在:empty不受支持时会以不同的方式降级（图标和文本之间的空间更小）：

http://jsfiddle.net/8kcQv/1/

HTML

<div class="icon">This message has text.</div>
<br>
<br>
<div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>

CSS

.icon{
 padding: 4px 4px 4px 32px; /* 32px adds extra space to pad against text */
 height: 24px;
 line-height: 16px;
 font-family: sans-serif;
 font-size: 16px;
 background:url(http://icons.iconarchive.com/icons/pixelmixer/basic/16/warning-icon.png) no-repeat 4px 4px;
 display: inline-block;
}

/* empty matches elements with no children (including text nodes) */
.icon:empty{ padding-left: 20px; }

:empty或者，如果您使用以下样式，则可能完全不用：

.icon{
    padding: 4px 8px 4px 24px;
    ...
}

这会在图标的两侧放置相等的距离。

于 2012-05-07T09:22:35.610 回答
0

我建议使用 addClass jQuery。添加某个类，如果它后面有文本将添加一个空格，否则不要放置任何类。您应该设置没有空格的默认项目。

于 2012-05-07T09:17:09.130 回答