web-dev-qa-db-ja.com

<li>とともに<ul>内で他のTAGを使用できますか？

<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>
cssxhtmlaccessibilityw3c
43
Jitendra Vyas

コードを有効にするには、<ul>以外の<li>内にタグを配置することはできません。

ただし、次のように、<li>内に任意のブロックレベル要素を配置できます。

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
48
Jonny Haynes

W3C勧告 によると、リストの基本構造は次のとおりでなければなりません。

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

pタグは、liの直接の子としてではなく、ulタグ内にのみ配置できます。 W3C勧告では、明示的に次のように述べています。

リストは、LI要素によって定義されたリスト項目のシーケンスで構成されます

12
ЯegDwight

内部に他のタグを含めることはできますが（それでも問題なく機能する可能性があります）、w3cに準拠していないため、そうすべきではありません。また、意味的な意味はほとんどありません。

単純なページを作成し、バリデーター（ http://validator.w3.org/ ）で実行するだけで、自分で確認できます:)

5
marcgg

テンプレートタグを使用できますが、完全に合法です。例えば：

<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>
3
Umair Hamid

いいえ、これは無効なマークアップになります。ただし、一部の行のルックアンドフィールを変更しようとしている場合は、代わりに特定のクラス名を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>
2
drdiv

あなたはcanそのようなマークアップを書きますが、should n'tは非準拠であり、異なるブラウザで奇妙で予期しない結果を得るかもしれません。

1
gingerbreadboy

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>
0
jps

リスト要素の一部をスタイルするためにこれを行う場合、これを行うことができます

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

お役に立てれば

0
pixeltocode

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

0
Y. Shoham