54

我们可以<ul>同时使用任何其他 TAG 吗<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>
4

11 回答 11

57

为了使您的代码有效，您不能将任何标签<ul>放在<li>.

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

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
于 2010-01-29T11:15:26.693 回答
12

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

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

您只能将p标签放在标签内li，而不是作为ul. W3C 建议书明确指出：

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

于 2010-01-29T10:49:41.230 回答
5

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

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

于 2010-01-29T10:51:32.943 回答
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>
于 2015-02-24T07:30:57.270 回答
2

不，这将是无效标记。但是，如果您想为某些行实现不同的外观，您可以通过将特定的类名添加到任何 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>
于 2013-09-11T16:53:08.387 回答
1

您可以编写这样的标记，但不应该这样做，因为它不符合要求，并且您可能会在不同的浏览器中得到奇怪和意外的结果。

于 2010-01-29T11:16:04.010 回答
0

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

于 2010-01-29T10:45:22.640 回答
0

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

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

希望这可以帮助

于 2010-01-29T13:43:55.700 回答
0

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>
于 2015-04-12T20:37:32.957 回答
0

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

文本，在内容模型的上下文中，要么什么都没有，要么意味着文本节点。文本有时单独用作内容模型，但也用作内容的短语，并且可以是元素间空白（如果文本节点为空或仅包含 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

于 2020-03-27T12:15:27.167 回答
0

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

<ul>
<li>
  <div>
    <h2>Some Dummmy text</h2>
    <p> some content </p>
    --- 
    ---
  </div>
<li/>
<li><li/>
<li><li/>
----
----
</ul>
于 2020-05-18T12:26:58.943 回答