Html ul突破了p元素

这件怪事一直在发生。我有一个密码：

    <p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" />
     <ul class="song_list">

      <li>Prism</li>
      <li>Other Song</li>
      <li>Some other song</li>
      <li>you know...</li>
      <li>getting ridiculous</li>

    </ul>

   </p>

棱镜
其他歌曲
其他歌曲
你知道
变得可笑

当我检查元素时，它看起来是这样的：

    <p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" /></p>
     <ul class="song_list">

      <li>Prism</li>
      <li>Other Song</li>
      <li>Some other song</li>
      <li>you know...</li>
      <li>getting ridiculous</li>

    </ul>

   <p></p>

棱镜
其他歌曲
其他歌曲
你知道
变得可笑

---

因此，我的ul不在正确的位置（图片旁边）。请提供帮助。

需要内联内容，但您指定了一个作为块元素的

标记。此处不允许使用，因此浏览器会在

开始之前自动关闭

元素

---

再考虑一下语义：

称为段落。段落不能包含列表。您应该使用一个需要流内容的

，而不是段落，因此允许使用

标记。

删除

p

标记，您可以使用

div

标记。 使用CSS属性（float:left）来

img

标记和

ul

，这样它们将彼此相邻。

根据，p元素“不能包含块级元素（包括p本身）。”

这意味着p元素只能包含内联元素

根据您的html，您正在使用：

--块元素
--允许的内联元素
**
..
**--不允许的块元素

---

您可以使用div元素来代替p。

参考此内容，您应该向询问者真正解释为什么需要使用div。有关更多详细信息，请参阅此副本的答案：