54

<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>
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 勧告によると、リストの基本構造は次のようにする必要があります。

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

タグは、の直接の子としてではなく、タグpの内部にのみ配置できます。W3C 勧告では、次のように明確に述べられています。liul

リストは、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

これを行ってリスト要素の一部をスタイル設定する場合は、これを行うことができます

<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

いいえ。リストの場合は、リスト項目が含まれています。非リスト項目を含むリストの使用は見当たりません。それはリストではありません...

于 2010-01-29T10:45:22.640 に答える
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 に答える