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

テキストをでラップして、spanそれにパディングを適用できます。

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

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

更新：span以下のコメントに従って、の代わりに 使用することから変更することにしましdivた。を使用することは可能ですdivが、追加のdisplay: inline; CSS属性があります。

于 2012-05-07T09:15:36.910 に答える
1

マークアップを少し再構築する場合（サイズを追加せずに）：

http://jsfiddle.net/8kcQv/

キーラインは次のとおりです。

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

これはIE9、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

addClassjQueryを使用することをお勧めします。後にテキストがある場合はスペースを追加する特定のクラスを追加します。それ以外の場合はクラスを配置しません。スペースをまったく入れずにデフォルトの項目を設定する必要があります。

于 2012-05-07T09:17:09.130 に答える