如何在视觉上(或语义上)在 <ol> <p>？

Question

根据HTML规范和对这个问题的回答，ol不能包含在p中。为什么不呢?

我正在写一篇APA格式的论文，我想用段落形式的有序列表。(参见OWL和编辑编写，了解APA格式的lists—ordered和unordered—的实现)

有时候，列表以段落的形式显示是有意义的，为什么这个列表在语义上不能成为段落的一部分?例如，在我的论文中，我有:

白马王子;一个问题集，涉及(A)在科学记数法和标准十进制中0和1之间的数字之间的转换，(b)计算大于0的数字的位值，(c)比较数量级小于1的正数和负数，以及(d)科学记数法中数字的加减法。见附件& help;

如果你不认为这个列表在语义上是段落的一部分，请说明你为什么这么认为，因为我对你的观点很感兴趣。

我真的很想知道我如何使用HTML标签<ol>和<li>编写这个列表，但是让它们显示，就好像它们是段落的一部分。原因是，从语义上讲，这些项目是有序列表的一部分，将它们包含在正确的元素中对SEO有好处，但我很好奇如何保持列表以段落形式编写。

Answer 1

现在，如果列表语义对您很重要，可以将列表分成一个块，或者像您的示例一样将其保留为文本字符串，然后继续您的生活。

如果你不认为这个列表在语义上是段落的一部分，请说明你为什么这么认为，

。但这不是问题所在。

[…一种油不能包含在p中，但为什么不呢?

因为规范这么说。讨论到此结束。
由于疏忽，有许多语义结构根本不存在于HTML中，这就是其中之一。例如，没有真正的方法来标记脚注，这很奇怪，因为HTML最初是为分享学术研究等内容而创建的。(有一些记录在案的作弊行为;不一样。)
鉴于您的链接，我假设您已经阅读了关于块元素和诸如此类的技术原因，因此我将在这里跳过。

我真的很想知道如何使用HTML标签<ol>和<li>来编写这个列表

那么，您可以从创建一个允许嵌套元素的自定义DTD开始(尽管在大多数情况下您确实不应该这样做)，然后弄清楚如何实际使列表流进入段落(例如:以一种不会让浏览器呕吐的方式显示:inline等)。或者为内联列表指定一个全新的元素。或者你可以继续做更重要的事情。

这些项是有序列表的一部分，将它们包含在正确的元素中对SEO有好处

有时候当人们把搜索引擎优化作为做事的理由时，答案应该是"你太努力了，可能有更好的事情要做。"这是其中之一。任何一件像这样"为SEO"做的事情都很少有什么不同，因为你无法做到这一点，这会让你的想法变得不同。问题的真正答案涉及到更改HTML规范。如果这是你喜欢做的工作，那么加入相关的WHATWG邮件列表，提出你的建议，为它辩护几个月，如果你幸运的话，它会成为正式的。

Answer 2

ol和ul目前不能包含在p中的原因是段落元素只能包含内联元素，而列表是块级元素。

也许列表不应该被自动认为是块级元素，但目前情况并非如此。

所以你的选择是把这段摘录分成两段，中间有一个列表，例如

…问题集涉及:

1. 在科学记数法和标准十进制中转换0和1之间的数字，
2. 计算大于0的数字的位值，
3. 比较小于1的正数和负数，和
4. 科学记数法中的加减法。

见附件

或者只是创建一个内联列表，它可能不验证，但在语义上是正确的，并且在大多数浏览器中都能很好地呈现。

Answer 3

我认为苏的出色回答抓住了重要的东西。我不确定CSS是否适合您的特定项目，但就在视觉上在段落中包含列表而言，您可以使用CSS和一些<span>标签(并且它将验证)。

演示:http://jsfiddle.net/wg9zD/

<p>
    … a problem set involving
    <span class="list">
        <span class="list-item">converting between numbers between 0 and 1 in scientific notation and standard decimal form</span>
        <span class="list-item">counting place values of numbers greater than 0</span>
        <span class="list-item">comparing positive and negative numbers with magnitude less than 1, and</span>
        <span class="list-item">adding and subtracting numbers in scientific notation</span>
    </span>
    See the attached …
</p>

.list {
    counter-reset:mycounter 0;
}
.list-item {
    display: list-item;  
    list-style: inside none;
    margin: 1em;
}
.list-item:before {
    content: "(" counter(mycounter, lower-alpha) ") ";
    counter-increment: mycounter;
}

Answer 4

我想我已经找到了做这件事的最好方法。基于@ llise majest的回答，我使用了一个内联列表:

<div class="paragraph">
  <p>... a problem set involving:</p>
  <ol>
    <li>converting between numbers between 0 and 1 in scientific notation and standard decimal form;</li>
    <li>counting place values of numbers greater than 0;</li>
    <li>comparing positive and negative numbers with magnitude less than 1; and</li>
    <li>adding and subtracting numbers in scientific notation.</li>
  </ol>
  <p>See the attached ...</p>
</div>

的样式规则:

div.paragraph p {
  display: inline;
}
div.paragraph ul,
div.paragraph ol,
div.paragraph li {
  padding: 0px;
  display: inline;
  list-style-type: lower-alpha;
  font-weight: bold; /* for demo purposes */
}
div.paragraph {
  counter-reset: item; /* creates a counter called 'item' initialized to 0 */
}
div.paragraph li:before {
  counter-increment: item; /* Add 1 to 'item' counter */
  content: '(' counter(item, lower-alpha) ') '; /* display (item) */
}

显示为:

白马王子;(a)在科学记数法和标准十进制中0和1之间的数字之间进行转换;(b)计算大于0的数字的位值;(c)小于1的正负数比较;(d)科学记数法中数字的加减法。见附件& help;