0

タイトル/値のリストがあります。私は、定義リストが進むべき道だと考えています。タイトルと定義を同じ行に配置したいのですが、タイトルの幅を互いに同じにしたくはありませんが、タイトルのテキストの量に基づいてそれぞれの幅を設定します。また、定義がブロック内にとどまり、タイトルの下で出血しないようにしたいと考えています。最後に、IE7 以降で動作するようにします。

わかりました、次の HTML/CSS を思いつきました。ほぼ動作します。http://jsfiddle.net/s45Kd/に実例があります。これは、stackoverflow ウィンドウで CSS を追加する方法がわからなかったからです (可能ですか?)。2 つの問題。

まず、定義に空白が含まれていない場合でも定義を強制的に破棄するにはどうすればよいですか (つまり、「電子メール」)。

第二に、長い定義が最終的にタイトル (つまり「テキスト」) の下でブリードするのはなぜですか?

「ただこれをしてください」と感謝しますが、なぜこれが起こるのかをよりよく理解しているので、もっと探しています。

ありがとうございました

<style type="text/css">
    dl,dt,dd {padding:0;margin:0;}
    dl {width:200px;border:1px dashed black;}
    dt {float:left;font-weight:bolder; padding-right:5px; border:1px dashed red;}
    dd {border:1px dashed blue;}
</style> 
<dl>
    <dt>First Name:</dt><dd>Bob</dd>
    <dt>Last Name:</dt><dd>Johnson</dd>
    <dt>Email:</dt><dd>bob.johnson@stackoverflow.com</dd>
    <dt>Phone Number:</dt><dd>(555) 555-1212</dd>
    <dt>Some Text:</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Birthday</dt><dd>January 1st</dd>
</dl>
4

1 に答える 1

4

まず、単語の折り返しは次のように設定することで解決できます。

word-wrap: break-word;

2 番目のキーは、 と の両方の要素を設定しoverflow: hidden;、のみをフローティングすることです。dtdddt

この jsFiddle のデモ: http://jsfiddle.net/fLPej/108/

于 2013-03-31T19:31:41.273 に答える