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

Examp樂：

Answer 1

如果兩個ul元素是你真正需要的東西：從圖像

ul { 
    clear: both; 
} 

這樣一來，現有的浮動：您只需清除浮在ul元素ist已停止並且不再影響下一個列表。有關清除屬性的更多信息，請參閱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 :

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>