0

みなさん、私は現在、店頭のレイアウト方法を決定しています。

意味的にはアイテムのリストをユーザーに提示しているので、リストを使用するのがとても好きです。ただし、表示したい各項目の詳細は、意味的にもリストです。

2つの異なるシナリオがあります：

インデントされた弾丸の場合、私は通常次のようなことをします。

<ul>
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <ul>
        <li>Indented Bullet 1</li>
        <li>Indented Bullet 1</li>
    </ul>
</ul>

ただし、上記の製品リストの場合は、次のようになります。

<ul>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

だから...私の質問は、リスト内でリストを使用する正しい方法はどちらですか？両方の方法が正しいですか、それとも一方だけが正しいですか？もしそうなら、どれとなぜですか？

4

6 に答える 6

2

2番目の方法のみが機能します。要素のみが（および）要素liの子になることができます。ulol

DTDを見てください[ド​​キュメント]：

<!ELEMENT UL - - (LI)+                 -- unordered list -->

li一方、要素にはすべてのblock[ docs]要素とinline[docs]要素を含めることができます。

<!ELEMENT LI - O (%flow;)*             -- list item -->

（[ドキュメント]の定義%flow;）

于 2011-03-07T17:03:21.443 に答える
0

2番目の方法だけが正しいです。要素で許可されるul要素はli要素のみです。これは、標準のDTDなどで確認できます。

于 2011-03-07T17:05:10.943 に答える
0

私はいつもこのような<ul>内部を使用します<li>：<ul><li>something<ul><li>inside</li><ul></li></ul>

于 2011-03-07T17:05:37.463 に答える
0

最初のものは正しくありません-あなたはできません。ULは子としてのみliを持つことができます。このテンプレートを使用する必要があります。

<ul>
  <li>---almost everything---</li>
</ul>

だから2番目のものは大丈夫です:)

于 2011-03-07T17:06:09.190 に答える
0

構文的には、2番目のコードスニペットが正しいことに同意します。あなたはセマンティクスにも興味があるので（これは素晴らしいです！）、次のことが改善されないのではないかと思います。

<ul>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

私はセマンティックマークアップの専門家ではありませんが、その背後にある考え方を完全にサポートしているので、他の人のオプションに興味があります。

于 2011-03-07T17:24:43.283 に答える
0

両方のコードセットが機能します。両方を代替構文とともにコンパイルしました。出力は同じでした。構文の違いは/liの配置場所ですが、それは問題ではありません。最初の例のように書きます。2番目の例が機能したことに驚きましたが、機能しました。私は30年前にPascal言語でプログラミングを学びました。これは、ネストされたステートメントパターンの表示方法に影響を与える可能性があります。

他の人が何をしているのかを見回して、私はちょうど何か新しいことを学びました-説明リスト。

<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl>

http://www.w3schools.com/html/html_lists.asp

于 2016-08-11T08:34:47.030 に答える