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 规范，段落可能包含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设计为像LIs一样。

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

或者更好的是，将两个元素包含在逻辑（section，article，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;
}

我刚刚添加了背景颜色和填充，您可以在之后删除。它有助于了解发生了什么。

段落元素中的无序列表

4 个答案: