javascript - テキストがその下に流れないようにするフローティングアイコンを使用してリストアイテムを実装する方法は?

Question

私がオーバーライドしようとしているもの

望ましくない動作

手に入れたいもの

望ましい動作

!重要: Li 要素にはパディングを残すべきではありません。または、クラスをアタッチせずに自動的に取得する必要があります。

以下の状況のため、そのようにしたいのです。50個のリスト要素を含むリストがある画像、そのうち30個にはアイコン（および左パディング）が20個あります。アイコンを持つ、またはアイコンを持たない各リスト要素にクラスをアタッチして、パディングを持たないようにする必要があります。

もちろん JavaScript も使えますが、css はどうでしょうか。私はそのような例を見たことがありますが、それを失いました。

score 1 · Accepted Answer

何かのようなもの：

li .icon{margin-left:-20px;position:absolute;}

score 0 · Accepted Answer

0

これを試して：

ul {
list-style: none url('path of image');
}

于 2013-10-20T11:52:31.570 に答える

score 0 · Accepted Answer

これを試すこともできます

ul li {
      list-style: url(path of image);
      list-style-position: outside;
}

score 0 · Accepted Answer

別の方法は、次のように他のコンテンツを別のコンテナーにラップできる場合です。

<li>
    <i class="icon">❤&lt;/i>
    <span>Lorem ipsum dorem fasid ipsum dorem fasid</span>
</li>

inline-block...次のように使用できます。

li > * { display:inline-block; vertical-align:top }
li > span { max-width:90% }

ここに画像の説明を入力

はwidth:90%調整できますが、アイコン用のスペースを確保してください。

4 に答える 4