HTML/CSS 列表图片问题

Question

我可以帮忙翻译。这段内容是关于编程的，讲述了在 ul/li 列表中插入图片时出现的问题：图片的右侧会显示正确的描述，但下一个项目符号也会紧贴在图片旁边，需要避免。以下是示例图像。

这里提供的代码如下：

<ul>
  <li><strong>Dwarf</strong></li>
</ul>

<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">

The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>

<ul>
  <li><strong>Elf</strong></li>
</ul> 

The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.

同时还有一个单独的CSS文件，其中包含:

img {
  float: left;
  height:90px;
  width:75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
  overflow: hidden;
}

例子：

- LaMat

---

为什么不使用Bootstrap？ - Frosty

现在我看了一下...我觉得你的代码没有意义。只有一个li的列表有什么意义呢？ - Jonas Grumann

这里有更多的内容，我只是举了一个例子。 - LaMat

@BDawg 如果我在列表内部进行标记，那么Dwarf项目符号会再次溢出...现在结果更好、更清洁。 - LaMat

@LaMat “更好”取决于您的观点。您的HTML需要一些改进。（有关更多详细信息，请参见我下面提供的答案）不过，仅有2天的经验，您做得非常好！ - BCDeWitt

Answer 1

如果您确实需要这两个ul元素：您可以在ul元素上清除浮动即可：

ul {
  clear: both;
}

这样，来自图像的现有浮动就会停止，并且不再影响下一个列表。有关清除属性的更多信息，请参见MDN。

通常，您只需使用一个带有多个列表项li的列表ul。请参见@BDawg的答案。

img {
  float: left;
  height: 90px;
  width: 75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
  overflow: hidden;
}
ul {
  clear: both;
}

<ul>
  <li> <strong>Dwarf</strong>
  </li>
</ul>
<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without
special equipment. His starting weapon is a short sword.
<ul>
  <li><strong>Elf</strong>
  </li>
</ul>
The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical
attack more effectively. His starting weapon is a short sword. and also a separate CSS file with :

- andreas

---

工作正常 :) 谢谢我刚开始学习HTML/CSS，我在家里有Bootstrap的链接，我会在家里尝试一下。Bootstrap是自动完成这个还是提供一个好的模板呢？ - LaMat

Bootstrap有pull-left和pull-right类来浮动元素。如果您使用Bootstrap的容器/行系统，则不需要使用clearfix。 - andreas

Answer 2

你要找的CSS属性是clear: both;

此外，你的HTML结构不符合语义化 - 也就是说，代码的含义不合理。你有一个人物列表，因此应该只有一个单独的<ul>列表。请参见下面的片段，以获得更好的HTML结构示例。

li {
  clear: both;
}

img {
  float: left;
  height: 90px;
  width: 75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
}

<ul>
  <li>
    <div><strong>Dwarf</strong></div>
    <img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">
    <p>The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>
  </li>
  <li>
    <div><strong>Elf</strong></div>
    <p>The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.</p>
  </li>
</ul>

- BCDeWitt