CSS-我们可以在<ul>和<li>中使用其他任何TAG吗?

我们可以在<ul><li>中使用其他任何TAG吗?

喜欢

<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>
Jitendra Vyas asked 2020-07-28T16:38:01Z
9个解决方案
48 votes

为了使您的代码有效,您不能在<li>内放置任何标签,而不是<li>

但是,您可以将任何块级元素放入<li>内,如下所示:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
Jonny Haynes answered 2020-07-28T16:38:26Z
12 votes

根据W3C建议书,列表的基本结构必须为:

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

您只能在li标签内放置p标签,而不能将其作为ul的直接子级。W3C建议书明确指出:

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

ЯegDwight answered 2020-07-28T16:38:55Z
5 votes

虽然您可以在其中包含其他标签(并且可能会很好用),但您不应该这样做,因为它不兼容w3c。 这也几乎没有语义。

只需创建一个简单的页面并通过验证器([http://validator.w3.org/])即可运行,您将自己看到:)

marcgg answered 2020-07-28T16:39:20Z
3 votes

您可以使用模板标记,这是完全合法的。 例如:

<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>
Umair Hamid answered 2020-07-28T16:39:40Z
2 votes

不,这将是无效的标记。 但是,如果要在某些行上实现不同的外观,则可以通过将特定的类名添加到任何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>
drdiv answered 2020-07-28T16:40:01Z
1 votes

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

gingerbreadboy answered 2020-07-28T16:40:22Z
0 votes

否。如果是列表,则其中包含列表项。 我看不到其中包含非列表项的列表有任何用处; 这不是清单...

Y. Shoham answered 2020-07-28T16:40:42Z
0 votes

如果您这样做是为了对列表元素的一部分进行样式设置,则可以这样做

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

希望这可以帮助

pixeltocode answered 2020-07-28T16:41:11Z
0 votes

特定于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>
jps answered 2020-07-28T16:41:31Z
translate from https://stackoverflow.com:/questions/2161337/can-we-use-any-other-tag-inside-ul-along-with-li