HTML / CSS列表图像问题

2023年5月10日 196次阅读

我已经在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;
}

例：

最佳答案 如果你需要两个ul元素：你可以清除ul元素上的浮点数：

ul {
  clear: both;
}

这样,图像中的现有浮动将停止,不再影响下一个列表.有关clear属性的更多信息,请参见MDN.

通常,您只需使用一个列表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 :
点赞