列表样式图像没有显示图标
问题描述:
我是新来的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>
答
列表项“李”将图像添加到列表:
<ul>
<li><img src="path to file.png" alt="quick description"></li>
</ul>
答
如果您将代码作为文本发布,这会非常有帮助。这样我们可以看到所有这些,并帮助编辑。
试试下面的CSS:
ul {
list-style-image: url('sqpurple.gif');
}
希望这有助于!
编辑:基于您发布的代码,以下CSS的工作原理:
.first li {
list-style-image: url("icon.png");
+0
我发布了你告诉我的代码,谢谢你的建议!我试过你做的,但我做错了..它不起作用 –
+0
检查出https://jsfiddle.net/qyo3outp/ –
答
而是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>
你应该张贴您的HTML代码示例以及您的帖子。你不会期望人们通过外部链接 –
我只是添加了一个片段,谢谢你的建议! –