0

私は次のhtmlを持っています:

<span class="icon-top-margin-4 margin-right sprite-book-open"></span>
<p>Topic: No Topic Title</p>

およびCSS:

.icon-top-margin-4 {
    background-color: red;
    content: " ";
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px; 
    vertical-align:bottom;
    width: 16px;
    line-height: 16px;
}

.sprite-book-open{ background-position: 0 -288px;  }

私が望むのは、アイコンの後に段落を開始することですが、新しい行で開始します。アイコンと同じ行から開始する方法はありますか? 段落を左にフロートしようとしましたが、アイコンの前に移動します。

4

3 に答える 3

2

p はブロック要素なので改行するので、 のようにしinlineます。

追加 .icon-top-margin-4 + p{display:inline;}

' + ' セレクターは、言及されたクラスのすぐ次の要素を選択します。

ライブデモ

于 2012-11-29T10:54:48.747 に答える
1

spanまた、単純に を の中にネストすることもできpます。

于 2012-11-29T10:56:43.090 に答える
0

段落スタイルを次のように設定できますdisplay: inline

于 2012-11-29T10:57:36.993 に答える