段落元素中的无序列表

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规范，一个段落可能包含phrasing content，仍然不包括其他分组元素：

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>

Answer 3

段落中不允许使用列表 - 没有办法做到这一点，这在语义上是不可能的。

如果您希望列表继承段落的样式，只需将 UL 元素添加到与您的 P 元素相同的 CSS 样式：

例如：

p, ul { font-size: 12px; }

或者更好的是，将这两个元素都包含在一些合乎逻辑的东西（部分、文章、div）中。

您必须问自己为什么要将列表放在段落中。如果是因为您希望它们的样式相同，那么您希望它们都在同一个包含元素中，例如：

<article>
    <p>Paragraph of text</p>
    <ul>
        <li>List</li>
    </ul>
    <p>Next paragraph</p>
</article>

然后为文章设置样式。

Answer 4

试试这个。我在我的段落中间添加了它并且它起作用了。我还给了它一个类和换行符。

HTML：

<div>
<ul class="list">
<br><li>LIST</li></br>
<br><li>LIST</li></br>
</ul>
</div>

CSS：

.list{
list-style: black circle;
padding: 15 15 15 15;
background-color: grey;
}

我刚刚添加了背景颜色和填充，之后您可以将其删除。 它有助于了解正在发生的事情。