HTML/CSS 列表图像问题

Question

我已经在 ul/li 列表中的 HTML 代码中放了一张图片，现在发生的是图片在右边得到了正确的描述，但是下一个要点也在我想避免的图片旁边...(参见下面的示例图片)

我使用的编码是:

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

例子:

Answer 1

如果这两个 ul 元素确实是您所需要的:您可以清除 ul 元素上的 float :

ul {
  clear: both;
}

这样，图像中现有的 float 就停止了，不再影响下一个列表。参见 MDN有关 clear 属性的更多信息。

通常情况下，您只需使用一个列表 ul 和多个列表项 li。请参阅@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 :