0

私はそれを次のように見せようとしています

カップ: ドレッシー: メッシー
シュガー アンド ティー
子供向け: 確かに
チャリティー: はい
ラックストライク: いいえ

しかし、CSSを正しく取得できません。dd/dt タグでディスプレイ インライン/ブロック コンボを使用しようとしましたが、特に最初の Cups: で行を中断したい場合に、めちゃくちゃになってしまいました。

dl {
  width:100%;
  overflow:hidden;
}

残りのコード: http://jsfiddle.net/eUk2h/3/

4

1 に答える 1

2

これを試して、列を指定するクラスを用意してください。columnとcolumn1_2左の列とcolumn2_2右の列。次に、デフォルトでは、プロパティを使用して独自の行に<dt>andが表示されます。同じ行にあるものを取得するには、.を削除するクラス名を使用します。 <dd>clearinlineclear

実演するために、クラス名を最小限に減らしました。

<div>
    <dl class="column column1_2">
        <dt>Cups:</dt>
        <dd>Sugar and Tee</dd>

        <dt>Good for Kids:</dt>
        <dd class="inline">Sure</dd>

        <dt>Charity:</dt>
        <dd class="inline">Yes</dd>

        <dt>LuckStrike:</dt>
        <dd class="inline">No</dd>
    </dl>
    <dl class="column column2_2">
        <dt>Dressy:</dt>
        <dd class="inline">Messy</dd>
    </dl>
</div>

CSS:

.column {
    float: left;
}
.column1_2,
.column2_2 {
    width: 50%;
}
.column dd {
    clear: both;
    margin: 0;
}
.column dt {
    float: left;
    clear: left;
}
.column .inline {
    clear: none;
    float: left;
    margin-left: 10px;
}

実際の例を参照してください: http://jsfiddle.net/pvkZn/

于 2013-04-02T18:31:07.630 に答える