Question

我是html和css的新手，我正在尝试使用名为pie_bullet.png的图片列出项目。有许多嵌套列表，我无法使其工作。有人可以帮我吗？我想用css列出图像的项目是列表项＆＃34; li＆＃34;在两个班级

＆＃13;

<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>

＆＃13;

Answer 1

而不是ul class将此方法添加到li class

li {
    list-style:none;
    background-image: url("http://www.icone-png.com/png/7/7359.png");
	background-repeat: no-repeat;
	background-position: left center;
	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>

Answer 2

将图像添加到列表中：

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

Answer 3

如果您将代码发布为文本，这将非常有用。这样我们就可以看到所有内容，并帮助编辑。

尝试以下CSS：

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

希望这有帮助！

编辑：根据您发布的代码，以下CSS工作：

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

列表样式图像不显示图标

3 个答案: