0

次のようにキー/値をリストしたいと思います。

Username: myhandle
Password: lalalalalala
     Key: somevalue

私はこれdlに 、dtおよびddhtml5 要素を使用しており、これらを適切に表示するための CSS を考え出そうとしています。私はそうしました： http://jsfiddle.net/njm84/1/

左側の幅を 50% に設定する必要があったことを除けば、良さそうです。問題は、値が非常に長い場合、すべてを左にシフトすると十分なスペースがあるにもかかわらず、不必要に切り捨てられることです。例えば：

                                    a: some-long-value-that-extends-far-to-the-right-even-though-there's-lots-of-space-on-left
                                    b: another-value-to-the-right-even-though-there's-lots-of-space-on-left

理想的には、要素に一種のテーブル レイアウト CSS を使用して、すべてが収まるように上記が左にシフトされるようにします。秘訣は、余分な html 要素を追加できないことです。dlそのため、要素を でラップすることはできません<div class="table">。

更新:これは、値の1つが非常に長い場合にキー/値のリストをどのように表示するかを示すjsfiddleの別のバージョンです: http://jsfiddle.net/njm84/4/

その長い値を考慮して、手動で幅を (15%、5%、80% に) 変更する必要がありました。

4

2 に答える 2

0

あなたの質問からあなたが探しているものは完全にはわかりませんが、これまたはこれに近いですか？使用したCSSは次のとおりです。

body {
    display: table;
    margin: 0 auto;
}
dt {
    text-align: right;
    font-weight: bold;
}
dt:after {
    content: ":";
}
dd {
    text-align: left;
    padding-left: 1em;
}
dl {
    display: table-row;
}
dt, dd {
    display: table-cell;
}

いくつかの注意: これは、適用できる親要素があるかどうかに依存します。display: tableそうである必要はありませんがbody、JSFiddle で使用できるのはそれだけでした。ddそれを壊すもう1つのことは、1つの に対して複数の要素があるマークアップがある場合ですdt。

于 2013-01-03T00:05:46.940 に答える