我们可以在 <ul> 中与 <li> 一起使用任何其他 TAG 吗？ [复制]答案

【问题标题】：Can we use any other TAG inside <ul> along with <li>? [duplicate]我们可以在 <ul> 中与 <li> 一起使用任何其他 TAG 吗？ [复制]
【发布时间】：2011-01-10 19:20:27
【问题描述】：

我们可以在<ul> 中使用任何其他标签和<li> 吗？

喜欢

<ul>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
</ul>

【问题讨论】：

你想用这个实现什么？如果您使用<ol> 并尝试获取列表延续，我可以理解，但将段落放入无序列表包装器中似乎没有任何意义（以及它是无效的，obv）。跨度>

标签： css xhtml accessibility w3c

【解决方案1】：

为了使您的代码有效，除了<li> 之外，您不能在<ul> 内放置任何标签。

但是，您可以将任何块级元素放入 <li> 中，如下所示：

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>

【讨论】：

script、noscript、ev 怎么样？ ins 和 del?我想用一些没有真正呈现的东西来标记一些间隔，但是可以放入ul。
@herby : 为什么不把它放在<ul>之后呢？？
@JonnyHaynes：我想要一些东西来标记间隔的开始和结束。例如lis 内的ul 范围。我使用了空的<script>s，它对我有用。
您对为什么在第 180 行左右，它在 UL 元素中直接包含非 li 元素有何看法？ github.com/google/web-starter-kit/blob/master/app/index.html
@johnsnails 代码无效。看起来像一个错字。我已经提出了一个拉取请求来修复它。

【解决方案2】：

根据W3C Recommendation，列表的基本结构必须是：

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

您只能将p 标签放在li 标签内，而不是作为ul 的直接子标签。 W3C Recommendation 明确指出：

列表由 LI 元素定义的列表项序列组成

【讨论】：

【解决方案3】：

虽然您可以在其中包含其他标签（并且它可能工作得很好），但您不应该这样做，因为它不符合 w3c 标准。它也几乎没有语义意义。

只需创建一个简单的页面并通过验证器 (http://validator.w3.org/) 运行它，您就会亲眼看到 :)

【讨论】：

【解决方案4】：

你可以使用模板标签，这是完全合法的。例如：

<ul>
<template>Some text here or <p>Some text here<p> etc</template>
<li>item 1</li>
<template>Some text here or <p>Some text here<p> etc</template>
<li>item 1</li>
</ul>

【讨论】：

对此有任何参考吗？
在MDN 中给出了允许的标签是LI、SCRIPT 和TEMPLATE

【解决方案5】：

不，这将是无效的标记。但是，如果您想为某些行实现不同的外观，您可以通过将特定的类名添加到任何 li 标记来实现。见下文：

<ul>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
</ul>

【讨论】：

【解决方案6】：

你可以写这样的标记，但你不应该因为它不合规，你可能会在不同的浏览器中得到奇怪和意想不到的结果。

【讨论】：

无意冒犯，但这个答案并没有真正的帮助。我确信 OP 知道他们有能力输入标记；我敢肯定他们问这个问题是为了确定它是否有效。
1) 老实说，如果您提供链接或示例代码或其他内容，这个答案可能会更有帮助。 2）我对OP的假设并不是那么牵强。在他们的代码中很清楚，他们知道他们可以键入标记，并且任何理性的人都可以推断出他们为什么提出这个问题。 3) 你说得对，我的评论可能没有那么有帮助——下次我会在没有理由的情况下投反对票？

【解决方案7】：

没有。如果是列表，则其中包含列表项。我看不到包含非列表项的列表的任何用途；它不是列表...

【讨论】：

【解决方案8】：

如果你这样做是为了设置列表元素的一部分，你可以这样做

<ul>
  <li>normal text <span>bold text</span></li>
  <li>normal text <span>bold text</span></li>
</ul>

然后使用 CSS

ul li {font-size: 12px; font-weight: normal;}
ul li span {font-size: 12px; font-weight: bold;}

希望对你有帮助

【讨论】：

投反对票：为什么使用带有font-weight: bold; 的跨度可以轻松且更重要的是，使用<strong> 标记会更具语义。

【解决方案9】：

Knockout.js 具体答案，可以使用下面的注释语法。

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

<script type="text/javascript">
    ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });
</script>

【讨论】：

【解决方案10】：

HTML5 引用

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element 说ul 有：

内容模型：零个或多个 li 和脚本支持元素。

“内容模型”是指我们可以放入元素中的内容。

因此，由此我们了解到，只允许 li 之类的 script。

将其与div 之类的元素进行比较，https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element 表示：

如果元素不是 dl 元素的子元素：流式内容。

“流内容”的定义是一个包含最多标签的巨大列表：

a，缩写，地址，...，文本

还要注意text 是如何出现在其中的。然后我们看到它的定义https://html.spec.whatwg.org/multipage/dom.html#text-content

文本，在内容模型的上下文中，要么什么都没有，要么意味着文本节点。文本有时会单独用作内容模型，但也可用于表达内容，并且可以是元素间空格（如果 Text 节点为空或仅包含 ASCII 空格）。

"元素间空白然后定义为：

元素之间总是允许使用 ASCII 空格。用户代理将源标记中元素之间的这些字符表示为 DOM 中的文本节点。空文本节点和仅由这些字符序列组成的文本节点被视为元素间空白。

和“ASCII 空白”为https://html.spec.whatwg.org/multipage/dom.html#text-content

ASCII 空格是 U+0009 TAB、U+000A LF、U+000C FF、U+000D CR 或 U+0020 SPACE。

从这一切来看，除了前面提到的li 和script 标签之外，我相信ul 中只允许使用上述空格。

HTML5 验证器同意该理论：https://validator.w3.org/nu/#textarea

【讨论】：

【解决方案11】：

除了li 之外，我们不能在ul 中放置任何标签。但是，我们可以在 li 中放置其他标签，像这样::

<ul>
<li>
  <div>
    <h2>Some Dummmy text</h2>
    <p> some content </p>
    --- 
    ---
  </div>
<li/>
<li><li/>
<li><li/>
----
----
</ul>

【讨论】：