2017-06-15 12 views
0

私はhtmlとcssが新しく、pie_bullet.pngという画像を持つアイテムをリストしようとしています。多くのネストされたリストがあり、私はそれを動作させることができません。誰でも私を助けてくれる?
私はCSSを使って画像を一覧表示したい項目がリストに画像を追加するには、両方のクラスリストスタイルの画像がアイコンを表示していない

<ul type="a"> 
 
    <li>preheat Oven: preheat oven to 350 degrees F(175 degrees C).</li> 
 
    <li>Make Lemon Filling: In a medium saucepan ...</li> 
 
    <ul class="first"> 
 
    <li>Whisk together 1 cup sugar, flour, cornstarch, and salt.</li> 
 
    <li>Stir in water, lemon juice and lemon zest.</li> 
 
    <li>Cook over medium-high heat, stirring frequently, until mixture comes to a boil.</li> 
 
    <li>Stir in butter.</li> 
 
    <li>Place egg yolks in a small bowl and gradually whisk in 1/2 cup of hot sugar mixture.</li> 
 
    <li>Whisk egg yolk mixture back into remaining sugar mixture.</li> 
 
    <li>Bring to a boil and continue to cook while stirring constantly until thick.</li> 
 
    <li>Remove from heat.</li> 
 
    <li>Pour filling into baked pastry shell.</li> 
 
    </ul> 
 
    <li>Make Meringue: In a large glass or metal bowl ...</li> 
 
    <ul class="second"> 
 
    <li>Whip egg whites until foamy.</li> 
 
    <li>Add sugar gradually, and continue to whip until stiff peaks form.</li> 
 
    <li>Spread meringue over pie, sealing the edges at the crust.</li> 
 
    </ul> 
 
    <li>Bake: Bake in preheated oven for 10 minutes, or until meringue is golden brown</li> 
 
</ul>

+1

を、このメソッドを追加投稿と一緒にHTMLコードの例あなたは人々が外部リンクを経由することを期待していないでしょう –

+0

私はちょうどスニペットを追加しました、あなたの助言に感謝! –

答えて

0

のリスト項目「LI」です:

<ul> 
<li><img src="path to file.png" alt="quick description"></li> 
</ul> 
0

コードをテキストとして投稿すると便利です。そうすれば、すべてを見ることができ、編集を手助けすることができます。

には、以下のCSSを試してみてください。

ul { 
    list-style-image: url('sqpurple.gif'); 
} 

ホープ、このことができます!

編集:あなたが投稿コードに基づいて、以下のCSSの作品:

.first li { 
list-style-image: url("icon.png"); 
+0

あなたが私に言ったように私はコードを掲載しました、あなたの助言に感謝します!私はあなたがしたことを試しましたが、間違っています..それは動作していません –

+0

https://jsfiddle.net/qyo3outp/をチェックしてください –

1

代わりにULクラスの李クラスにあなたが投稿する必要があります

li { 
 
    list-style:none; 
 
    background-image: url("http://www.icone-png.com/png/7/7359.png"); 
 
\t background-repeat: no-repeat; 
 
\t background-position: left center; 
 
\t background-size: 40px; 
 
    padding:10px 0px 10px 40px; 
 
}
<ul type="a"> 
 
    <li>preheat Oven: preheat oven to 350 degrees F(175 degrees C).</li> 
 
    <li>Make Lemon Filling: In a medium saucepan ...</li> 
 
    <ul class="first"> 
 
    <li>Whisk together 1 cup sugar, flour, cornstarch, and salt.</li> 
 
    <li>Stir in water, lemon juice and lemon zest.</li> 
 
    <li>Cook over medium-high heat, stirring frequently, until mixture comes to a boil.</li> 
 
    <li>Stir in butter.</li> 
 
    <li>Place egg yolks in a small bowl and gradually whisk in 1/2 cup of hot sugar mixture.</li> 
 
    <li>Whisk egg yolk mixture back into remaining sugar mixture.</li> 
 
    <li>Bring to a boil and continue to cook while stirring constantly until thick.</li> 
 
    <li>Remove from heat.</li> 
 
    <li>Pour filling into baked pastry shell.</li> 
 
    </ul> 
 
    <li>Make Meringue: In a large glass or metal bowl ...</li> 
 
    <ul class="second"> 
 
    <li>Whip egg whites until foamy.</li> 
 
    <li>Add sugar gradually, and continue to whip until stiff peaks form.</li> 
 
    <li>Spread meringue over pie, sealing the edges at the crust.</li> 
 
    </ul> 
 
    <li>Bake: Bake in preheated oven for 10 minutes, or until meringue is golden brown</li> 
 
</ul>

関連する問題