1

HTML 定義リストを水平方向に配置しようとしているので、用語が左側にあり、定義が右側にあります。

用語と定義はどちらも非常に長くなる可能性があるため、使用可能な幅よりも広くなり、折り返されます。

私の CSS では、定義が折り返され、対応する用語よりも高くても問題ありません。しかし、まれに、用語が重なり合い、対応する定義よりも高い場合、次の定義を適切にクリアすることができません。

これは私の jsFiddle で確認できます。「555」という定義が「555」という用語と適切に一致していません。

http://jsfiddle.net/jmuheim/kjf8f/

これを修正する方法についてのヘルプは本当に感謝しています。要件：

  • <dd>右側の使用可能なすべての水平スペースを定義で使用したいので、タグに固定幅を使用したくありません。
  • どのような状況でも定義を対応する用語の下に配置したくありません。
4

2 に答える 2

2

私はマークの答えが本当に好きです。設計要件を壊さない場合の別の解決策は、おそらく DD もフロートし、DD と DT (および水平マージン) の両方に、固定ピクセル幅ではなくパーセンテージ ベースの幅を与えることです: http://jsfiddle.ネット/dHRSz/1/

または、内容によっては、表 (用語が で囲まれている<th scope="row">) は、これをマークアップするのにあまり不適切ではない可能性があると考えてください。

編集 - jsfiddle から CSS をコピー:

body {
    padding: 0;
    margin: 0;
}

.block {
    overflow: hidden;
    margin: 20px 0;
}

dl {
    margin: 10px 0;
}

dt {
    margin: 0 0 4px 0;
    float: left;
    clear: left;
    width: 28%;
}

dd {
    float: left;
    width: 71%;
    margin: 0 0 4px 1%;
}
于 2013-10-02T14:05:02.347 に答える