4

この外観を取得することは可能ですか dlはどのように見えるべきか

このコードから（CSSを使用しますか？）

<dl>
<dt>Latitude</dt>
<dd>50.0</dd>
<dt>Longitude</dt>
<dd>100.0</dd>
<dt>h (metres)</dt>
<dd>0.000</dd>
<dt>Vφ (mm/y)</dt>
<dd>-6.4</dd>
<dt>Vλ (mm/y)</dt>
<dd>-15.3</dd>
<dt>Vh (mm/y)</dt>
<dd>-2.0</dd>
</dl>

明確にするために、私は色を気にしません。私にとって重要なのは、dt/ddペアを複数の列と複数の行でスタックすることです。テーブルで希望の外観を得ることができますが、アクセシビリティ基準を満たしていません。aは意味的に私が望むものに近いと思います...それは実際にはキーと値のペアのリストです。

私が使用している色は次のとおりです。

dl {border: 1px solid #C8C8C8;}

dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}
4

4 に答える 4

4

これが基本的な解決策であり、ひどいように見えますが、その構造を使用すると、要件の後にそれを改善できるはずです。

フィドル

CSS：

dl {
    float: left;
    display: block;
    width: 400px;
}

dl dd {
    float: left;
    margin-left: -35px;
    margin-top: 20px;
    width. 100px;
    background-color: #e0e0e0;
    border: 1px solid #777777;
    padding: 5px;
    position: relative;
    display: block;
}
dl dt {
    float: left;
    width. 70px;
    position: relative;
    display: block;
}
于 2013-02-04T22:19:46.587 に答える
4

テーブルについて本質的にアクセスできないものは何もありません。問題になるのは、表形式のデータを表現するためではなく、表示のために使用される場合のみです。表形式のデータがありますが、たまたま2つの列があります。2列6行のテーブルであるからといって、1つのように見える必要があるわけではありません。

http://jsfiddle.net/hgWxT/

table, tbody {
    display: block;
}

tr {
    display: inline-block;
    width: 30%;
}

td, th {
    display: block;
}

<table>
    <tr>
        <th>Latitude</th>
        <td>50.0</td>
    </tr>

    <tr>
        <th>Longitude</th>
        <td>100.0</td>
    </tr>

    <tr>
        <th>h (metres)</th>
        <td>0.000</td>
    </tr>

    <tr>
        <th>Vf (mm/y)</th>
        <td>-6.4</td>
    </tr>

    <tr>
        <th>V? (mm/y)</th>
        <td>-15.3</td>
    </tr>

    <tr>
        <th>Vh (mm/y)</th>
        <td>-2.0</td>
    </tr>
</table>
于 2013-02-05T01:09:23.420 に答える
0

はい、可能です。Andy Clarkはさまざまなリストを使用するのが好きで、私はdlを何度も使用しました。

あなたはそれをol/ulのように扱うだけです。最初にマージン/パディングを削除します。

dtにクラスを割り当て、それらをフロートさせますが、2番目の行に別のクラスを割り当てる必要があります。DLのコンテナの幅が設定されている場合とは異なり、dtは折り返されますが、dtの2番目の行（V（mm / y）および-6.4 ..その行）を実際に制御するには、別のクラスを割り当てて、スタイル。

于 2013-02-04T22:07:19.583 に答える
-1

可能？はい、しかし不必要に難しいです。

はるかに簡単なのは、要素の各dt/ddグループをラップし、それに応じてスタイルを設定することです。完成した例は次のとおりです：http：//cssdeck.com/labs/jsqdknho

于 2013-02-04T22:16:23.657 に答える