0

私はいくつかのマークアップを持っています:

<dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>

<dd>s が s と一致するようにスタイルを設定したいと思い<dt>ます。私のドキュメントline-heightは に設定されてい1.3ます。ems が に等しく、font-sizeそれline-heightが のパーセンテージであることを知ってfont-size、私は試しました:

body { line-height: 1.3; font-size: 75%; }
dd { margin-top: -1.3em; margin-left: 10em; }

<dt>データに適切な間隔を与える。これはうまくいきませline-heightん15pxでし1.3emた15.6px。http://www.brunildo.org/test/line-height-approx.htmlによると、異なるブラウザーは異なる方法で行の高さの正確なピクセル値を計算します - 私は Chrome で開発していましたが、それに引っかかったのは幸運でした.

この質問の目的のために、私はピクセルを避けたいと思います -line-heightとmargin-topをピクセルで指定するとうまくいきますが、サイズ変更がうまくいきません。

問題を示す uri を次に示します。

data:text/html,<style>body { line-height: 1.3; font-size: 75%; } dd { margin-top: -1.3em; margin-left: 1em; }</style><dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>
4

3 に答える 3

1

あなたが達成したいことについての私の理解から、同じ行に各 dt/dd ペアが必要ですか?

jsfiddle の実際の例を次に示します: http://jsfiddle.net/w9YQx/1/

フロートを使用してクリアします。line-height、font-size などは無関係です。

dt {
    float: left;
    width: 150px;
    clear: left;
    text-align: right;
}
dd {
    margin-left: 10px;
}
​

幅は好きなように設定できます。これは単なる例です。

于 2012-09-18T21:49:04.900 に答える
1

<ol>この場合の方が適しているようですが、次のようにすることもできます。

dl {
    font: 200%/1.3 Arial;
    overflow: hidden;
}

dt {
    clear: both;
}

dt, dd {
   float: left;
   margin-left: 0.5em;
}
​

http://jsfiddle.net/MgBvV/1/

于 2012-09-18T21:56:50.540 に答える
0 
position: relative;
bottom: 1.3em; /* same as line height */

フィドルを見る

于 2012-09-18T21:49:00.037 に答える