Html 段落元素中的无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7168723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
unordered list in a paragraph element
提问by vdegenne
when I write this:
当我写这个：
<p class="paragraph">the list:
<ul>
<li>item</li>
</ul>
</p>
my browser is semantically rendered it as:
我的浏览器在语义上呈现为：
<p class="paragraph">the list:</p>
<ul>
<li>item</li>
</ul>
<p></p>
why ? and is there a better way to introduce list-items in a paragraph ?
为什么 ？有没有更好的方法在段落中引入列表项？
回答by
According to the HTML 5.0specification, a paragraph may contain phrasing content, which stilldoes not include other grouping elements:
根据HTML 5.0规范，段落可能包含phrasing content，但仍不包含其他分组元素：
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
According to the HTML 4.01specification, a paragraph may only contain inline elements:
根据HTML 4.01规范，一个段落只能包含内联元素：
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
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 --
>
The correct markup in this case is to close your paragraph before starting the list.
在这种情况下，正确的标记是在开始列表之前关闭您的段落。
Alternatively, you can use another tag other than paragraph (like <div>) which is not processed in this way.
或者，您可以使用<div>不是以这种方式处理的段落（如）的另一个标签。
<div>
<ul> ... </ul>
</div>
回答by HaLeiVi
I just had this issue and did not want to enclose it in a DIV since I was using P for the rest of that page and all pages. Instead I styled SPANs to behave like LIs.
我只是遇到了这个问题，不想将它包含在 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>回答by mal-wan
Lists aren't allowed in paragraphs - there's no way to do it, it's semantically impossible.
段落中不允许使用列表 - 没有办法做到这一点，这在语义上是不可能的。
If you want the list to inherit styles from the paragraph, just add the UL element to the same CSS styles as your P elements:
如果您希望列表从段落继承样式，只需将 UL 元素添加到与 P 元素相同的 CSS 样式中：
eg:
例如：
p, ul { font-size: 12px; }
or better yet, encase both elements in something logical (section, article, div).
或者更好的是，将两个元素都包含在逻辑中（部分、文章、div）。
You've got to ask yourself why you want the list inside the paragraph. If it's because you want them styled the same, then you want them both in the same containing element, eg:
您必须问自己为什么要在段落中列出列表。如果是因为您希望它们的样式相同，那么您希望它们都位于同一个包含元素中，例如：
<article>
<p>Paragraph of text</p>
<ul>
<li>List</li>
</ul>
<p>Next paragraph</p>
</article>
and then style the article.
然后为文章设置样式。
回答by Amers
Try this. I added it in the middle of my paragraph and it worked. I also gave it a class and line breaks.
尝试这个。我在我的段落中间添加了它并且它起作用了。我还给了它一个类和换行符。
HTML:
HTML：
<div>
<ul class="list">
<br><li>LIST</li></br>
<br><li>LIST</li></br>
</ul>
</div>
CSS:
CSS：
.list{
list-style: black circle;
padding: 15 15 15 15;
background-color: grey;
}
I just added a background color and padding, which you can remove after. It helps to see what's happening.
我刚刚添加了背景颜色和填充，您可以在之后删除它们。它有助于了解正在发生的事情。
