58

HTMLがこれと意味的に同等のことを実行できたらいいのにと思います。

<dl class="main-list">
    <definitionitem>
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </definitionitem>
    <definitionitem>
        <dt>Stuff</dt>
            <dd>Alright!</dd>
    </definitionitem>
</dl>

ただし、私が最も近いものは、のセマンティクスに100％満足しているわけではないためです。

<div class="redundant-wrapper">
    <dl class="main-list">
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </dl>
    <dl class="another-main-list">
        <dt>Stuff!</dt>
            <dd>Alright!</dd>
    </dl>
</div>

誰かがあなたがこれをどのように行うことができるかについて他のアイデアを持っているかどうか疑問に思いましたか？

また、アイテムがグループ化される理由は、マークアップされているコンテンツで視覚的にグループ化されているためです。単一の定義リストを持つ辞書ページを想像してみてください。各定義は、左に浮かぶはめ込みボックスにあります。私はいつもこの状況に遭遇します。

4

3 に答える 3

76

いいえ、Ian Hickson（HTML仕様エディター）は、これはCSSの問題であり、HTMLの問題ではないと確信しています。

これは必要ないはずです。これはCSSの制限です。

正しい解決策は、CSSが、ラップする要素をラップするレンダリングツリーに匿名コンテナを導入する疑似要素またはその他のメカニズムを提供することです。

同時に、fantasai（CSSスペックエディター）は逆に確信しています：

これはCSSの問題ではないと思います。HTMLの問題だと思います。疑似要素は、仕様にとって重要なことであり、実装することも重要であり、使用するのは比較的紛らわしいことです。

それにもかかわらず、イアンは明らかにそれを無視し、現実から切り離され続けています。

（ HTML仕様によるLEGENDとの最初の直接の子である必要があります）、 （の最初/最後の直接の子である必要があります）、および（/の直接の子である必要があります）にも同じ問題があります。FIELDSETFIGCAPTIONFIGURELIULOL

DT特に/に関してDDは、私は個人的にそれぞれの中にリストを使用 しています：ULDLLI

<ul>
    <li><dl>
        <dt>Lorem</dt>
        <dd>Lorem definition</dd>
    </dl></li>

    <li><dl>
        <dt>Ipsum</dt>
        <dd>Ipsum definition</dd>
    </dl></li>
</ul>

したがって、とのDL間の関係を作成し、それらをすべて1つのリストに属するようにリストする必要があります。DTDDUL

更新（2016-11-14）： HTML標準（現在のWHATWGバージョン）（2016-10-31以降）では、DIV要素（オプションでいわゆるスクリプトサポート要素と混合SCRIPT）TEMPLATEを要素の直接の子にすることができDLます。W3CのHTMLバリデーターはまだこの変更を考慮していませんが、実験的なHTML5.orgバリデーターは考慮しています。

更新（2017-01-18）：仕様では、 /に対して複数のネストされたラッパーが許可されていないことが判明したため、実際の機能の有用性は実際には非常に制限されており、ここで説明する→<code>LI→<code>DLアプローチまだ関連しています。DIVDTDDUL

于 2012-06-12T13:48:51.657 に答える
14

dd-dtラッピングに関するリポジトリがあります。html仕様whatwgによると、 DL内で各ddとdtをdivタグでラップしても問題ありません。

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>
于 2018-06-05T13:57:52.543 に答える
6

2018年です！CSSグリッドdtは十分にサポートされており、主な目標が/ dd...の位置を制御することである場合、これは問題に対するさらに別の可能な解決策/回避策を提供します。

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

（の値を微調整してgrid-template-columns、特定の設計要件に一致させることができます。）

これは仕様の制限を「解決」するものではありませんが、セマンティックマークアップに関する懸念について具体的に言及されているので、役立つと思いました。上で述べたように、グリッドが実行できることには制限がありますが、目標がdt/のレイアウトを制御するddことである場合、これはまだ有効なHTMLである最も意味のある方法であると思います。

于 2018-10-17T17:34:36.223 に答える