4

それぞれがタイトルといくつかのデータを同じ行に持つ複数のデータ行を表示したいと思います。この質問は SO で確実に回答されています (つまり、dt と dd を同じ行にスタイルする方法は? ) ですが、私にはうまくいかないようです。DD がそれを修正するコンテンツを持っていない場合を除いて、以下はうまくいくようです。IE7+に興味があります。私はこれをどのように行っていますか？ありがとう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled</title>
        <style>
            dl {width: 395px; font-size:12px}
            dd,dt  {padding-top:5px;padding-bottom:5px;}
            dt {float:left; padding-right: 5px; font-weight: bolder;}
            /* dd {padding-left: 5px;} Does not work */
        </style>

    </head>
    <body>
        <dl>
            <dt>DT Element 1:</dt><dd>DD Elem 1</dd>
            <dt>DT Second Element:</dt><dd>DD Element Two</dd>
            <dt>DT Elem 3:</dt><dd></dd>
            <dt>DT Element 4:</dt><dd>DD Elem 4</dd>
            <dt>DT Fifth Element:</dt><dd>&nbsp;</dd>
            <dt>DT Elem 6:</dt><dd>DD Element Six</dd>
        </dl>  
    </body>
</html>
4

2 に答える 2

6

あなたの問題は、空ddが生成されず、空のスペース（高さ：0px）が残ることです。

nbsp;可能であれば、空の要素の中に a を入れるだけです。これは、クロスブラウザーで機能する最も簡単なソリューションです。

シンプルで純粋な css 修正は次のようになります。

dd:after {content:"."}

しかし、各定義の後にドットを追加します...

dd に min-height を設定することもできます:

dt {clear: left;}
dt, dd {min-height:1.5em;}

(dt と dd の最小高さは同じである必要があります!)

デモ

dt...高さが規則的でない場合（たとえば、2行にある場合）、おそらく問題が発生するでしょう。

于 2012-12-04T19:10:54.673 に答える