Question

这种真正怪异的事情一直在发生。我有一个代码：

    <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不在正确的位置（在图片旁边）。请帮忙。

Answer 1

需要内联内容，但您指定了<ul>标记，这是一个块元素。这是不允许的，因此浏览器会在开始之前自动关闭<ul>元素。

考虑一秒钟的语义：被称为段落。段落不能包含列表。您应该使用期望流内容的<diV>而不是段落，因此允许使用<ul>标记。

Answer 2

根据http://www.w3.org/TR/html401/struct/text.html#h-9.3.1， P 元素＆＃34;不能包含块级元素（包括P本身）。＆＃34;

<!ELEMENT P - O (%inline;)* -- paragraph -->

这意味着 P 元素只能在其中包含内联元素。

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

 --block element <img..../> -- inline element which is allowed **<ul>...</ul>** -- block element which is not allowed 

您可以使用 div 元素而不是P.

Answer 3

删除p代码，您可以使用div代码。使用CSS属性（float：left）到img标记和ul，这样它们就会彼此相邻。

英国突破了p元素

3 个答案: