2

この定義リストがあるとします (「セット」の数は重要ではなく、1 つ以上あるというだけです)。

<dl>
  <dt>Authors
  <dd>John
  <dd>Luke

  <dt>Editor
  <dd>Frank
</dl>

これらの定義を水平に進めたいと思います。次のようなものが得られるようにします。

Authors    Editor
John       Frank
Luke

また、ブラウザーのサイズを変更して狭すぎると、次のようにラップされます。

Authors
John
Luke

Editor
Frank

これを良い方法で行う方法はありますか？

私が正しく理解している場合、dl の唯一の正当な要素は dt および dd 項目であるため、それらを div 要素などでラップすることはできません。それらを個別の dl リストに分割することもできますが、実際には 1 つのリストである必要があるため、それも正しくありません。何か案は？

4

4 に答える 4

1

dt タグと dd タグのペアをまとめてラップする有効なタグはありません。XHTML 2.0のdi要素が提案されましたが、XHTML 2.0 は成功しませんでした。

各項目には 1 組の内部タグがあるためul、各liタグが各リスト項目のコンテンツの内部ラッパーとして機能する (この場合は各列のラッパーとして機能する) とは異なります。

基本的に、各列にadlまたは aを使用します。ulセマンティック マークアップは優れていますが、 がなければ、diこのdlタイプのレイアウトには適していません。

編集：

@biziclop が述べたように、CSS3 複数列レイアウトが標準化されてサポートされるようになると、列を正しい場所で分割できるようになる可能性があります (そのレイアウトに関する限られたオプションで)。最終的に、コードは次のようになります。

dl {column-width:100px; column-fill:auto;}
dt {break-before:always;}
于 2012-07-04T21:26:30.683 に答える
0

css3 のあまりサポートされていない複数列機能を試してみましょう。

短所：

  • 一定の高さが必要
  • ラップしません (メディア クエリを作成しない限り)

http://jsfiddle.net/rCQbP/5/

dl {
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
            column-width: 100px;
    /* fixed height MUST be used */
    height: 200px;
}

dt ~ dt {
    /* simulate column-break-before: always; */
    margin-top: 1000px;
}
于 2012-07-04T19:44:12.180 に答える
0

いくつかの絶対配置と nth-of-type セレクターを使用することで可能です (古いブラウザーでは認識されません - うーん! - しかし、どちらもメディア クエリではないため、問題なく劣化するはずです): デモンストレーション: http://jsfiddle.net/PrJWJ/6/

dt,dd{margin:0;}

@media (min-width:20em) /* 10em per column */
{
    /* Enable positioning*/
    dl{position:relative;}
    dt,dd{position:absolute;}

    dt{top:0;} /* All terms at the top */
    dd{top:1.3em;}  /* 1st dd under a term at 1.3em (factoring in line spacing) */
    dd+dd{top:2.6em;} /* 2nd dd under a term */

    /* 1st column */
    dt:nth-of-type(1),
    dt:nth-of-type(1)~dd
    {left:0;}

    /* 2nd column */
    dt:nth-of-type(2),
    dt:nth-of-type(2)~dd
    {left:10em;}
}

@media (max-width:19.99em)
{
    /* Space before a new term */
    dd+dt{margin-top:1em;}
}

ただし、可能な最大行数と列数に応じてこれを拡張する必要があります。

于 2012-07-05T14:28:57.660 に答える
0

順序付けされていないリストのセットを使用してこの問題を解決しました: ここで表示してください: http://jsfiddle.net/radialglo/pXLB4/幅を設定する必要はないことに注意してください。次の行にプッシュされます。フィドルで html ビューポートをドラッグします。

<div>
    <ul>Authors
        <li>John</li>
        <li>Luke</li>
    </ul>
    <ul>
    <li>Editor</li>
    <li>Frank</li>
    </ul>
</div>​

そしてこのスタイリング：

div ul{
    float: left;
    list-style: none;
    width: 100px;
    margin-bottom: 1em;
}​

セマンティックの使用に固執している場合、実行可能な解決策はわかりません。これは、各定義用語とその定義が、簡単にスタイル設定できるようにグループ化されていないためですか?

于 2012-07-04T19:41:54.850 に答える