HTML/CSS列表图像问题

我在HTML代码中放了一张图片，它在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.

例如：

---

如果两个

ul

元素是您真正需要的：您只需清除

ul

元素上的浮动即可：

ul {
  clear: both;
}

这样，图像ist中的现有浮动就停止了，不再影响下一个列表。有关clear属性的详细信息，请参见

通常，您只需使用一个列表

ul

和多个列表项

li

。请参见@BDawg的答案

img{
浮动：左；
高度：90px；
宽度：75px；
保证金：5px；
垫底：10px；
右侧填充：5px；
溢出：隐藏；
}
保险商实验室{
明确：两者皆有；
}

矮人


矮人雕像矮小结实，盔甲完好，手持战斧。他健康状况很好，但缺乏野蛮人的攻击力，也没有魔法能力。侏儒也有一种独特的能力，可以在没有任何武器的情况下解除陷阱
特殊设备。他的出发武器是一把短剑。

Elf


精灵雕像身材修长，手持一把单手短剑。他在攻击力上与矮人不相上下，但身体却不那么强壮。他也能使用一种元素的魔法空气、土地、火或水，并能抵抗魔法
攻击更有效。他的出发武器是一把短剑。还有一个单独的CSS文件，其中包含：

您要查找的CSS属性是

清除：两者都是

此外，您的HTML在语义上不是结构化的——也就是说，代码的含义没有意义。您有一个小雕像列表，因此应该只有一个
列表。有关HTML结构的更好示例，请参见下面的代码段


li{
明确：两者皆有；
}
img{
浮动：左；
高度：90px；
宽度：75px；
保证金：5px；
垫底：10px；
右侧填充：5px；
}


矮人
矮人雕像矮小结实，盔甲完好，手持战斧。他健康状况很好，但缺乏野蛮人的攻击力，也没有魔法能力。矮人也有独特的能力，能够解除陷阱而无需特殊装备。他的出发武器是一把短剑



Elf
精灵雕像身材修长，手持一把单手短剑。他在攻击力上与矮人不相上下，但身体却不那么强壮。他还能够使用一种元素的魔法空气、土地、火或水，并能更有效地抵抗魔法攻击。他的出发武器是一把短剑


试试这个：li{overflow:hidden；}另外，不要链接到屏幕截图，而是在这个网站上创建一个小提琴来重现问题。为了快速响应，Thx不起作用，它只是删除列表中的“点”…现在我看到了它。。。我认为你的代码没有意义。有一个只有1里的列表有什么意义？@LaMat“更好”取决于你的观点。您的HTML需要做一些工作。（更多细节，请参见我在下面提供的答案）尽管只有2天的经验，但你做得非常好！工作：）Thx我刚刚开始使用这个HTML/CSS的东西，我在家里有bootstrap的链接，我会在家里尝试，bootstrap是自动完成的还是提供了一个很好的模板？bootstrap有
左拉
和
右拉
类来浮动元素。如果您使用Bottstraps容器/行系统，则不需要此clearfix。
ul {
  clear: both;
}