段落元素中的无序列表

Question

当我这样写:

<p class="paragraph">the list:
  <ul>
    <li>item</li>
  </ul>
</p>

我的浏览器在语义上将其渲染为:

<p class="paragraph">the list:</p>
<ul>
  <li>item</li>
</ul>
<p></p>

为什么？是否有更好的方法在段落中引入列表项？

Answer 1

根据HTML 5.0规范,段落可能包含措辞内容,但仍不包括其他分组元素:

http://www.w3.org/TR/html5/grouping-content.html#the-p-element

根据HTML 4.01规范,段落可能只包含内联元素:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

9.3.1 Paragraphs: the P element

<!ELEMENT P - O (%inline;)*            -- paragraph -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

在这种情况下,正确的标记是在开始列表之前关闭您的段落.

或者,您可以使用段落(如<div>)之外的其他标记,但不以这种方式处理.

<div>
   <ul> ... </ul>
</div>

Answer 2

我只是遇到了这个问题，并且不想将其包含在DIV中，因为我在该页面的其余部分和所有页面中都使用了P。相反，我将SPAN的样式设置为类似于LI。

SPAN.li  {display: list-item; margin-left: 2em}

<P>These issues are currently on my mind
<SPAN class=li>My hat</SPAN>
<SPAN class=li>Global warming</SPAN>
<SPAN class=li>Global cooling</SPAN>
<SPAN class=li>Global terrorism</SPAN>
<SPAN class=li>Global narrow-mindedness</SPAN></P>