複数のddタグを並べる

私はdtを持っていて、複数のddを並べています。残念ながら、第2のdl行は左にシフトします。これを防ぐためにスタイリングを調整するにはどうすればよいですか？私はアプリケーションからそれを得るので、私はHTMLを編集することはできません。これはほんの一例で、1ページに6〜10 dtタグがあり、複数のddを持つので、汎用ソリューションにする必要があります。複数のddタグを並べる

<head> 
<style type="text/css"> 
dl { 
width:450px; 
overflow:hidden; 
background:#ff0; 
} 
dt { 
padding:0 4px 0 4px; 
float:left; 
width:125px; 
background:#cc0; 
clear: left; 
text-align: right; 
} 
dd { 
padding:0 4px 0 4px; 
margin: 0; 
float:left; 
width:250px; 
background:#dd0; 
} 
</style> 
</head> 
<body> 
    <h3>Test McTesterson</h3> 
    <dl> 
     <dt>Personal Phone</dt> <dd>555-555-5555</dd> 
     <dt>Personal Email</dt> <dd>[email protected]</dd> 
     <dt>Address</dt> <dd><span>123 Main St</span></dd><dd> <span>Cityburg</span> <span>Qa</span> <span>12345</span></dd> 
     <dt>Birthdate</dt> <dd>198</dd> 
    </dl> 
<body>

出典

2010-12-07 Tyson of the Northwest

この問題はあなたの満足のために解決しましたか？または、掲載されたソリューションに大きな問題があったのでしょうか？ –

一つの方法：

dd + dd { 
    display: block; /* to force new line */ 
    margin: 0 0 0 4em; /* whatever the width of dt */ 
}

出典

2010-12-07 22:36:41

これはおそらくIE6がサポートされる必要がないと仮定した場合の最良の賭けです。 – BoltClock

あなたはまた、複数のddの使用しないで、ただ一つのddにすべての情報を入れることができます。

出典

2010-12-07 22:41:57 matthewpavkov

私はアプリからddを取得することを除いて、私は実際には、JavaScriptに依存するいくつかのクラス属性が含まれているので、タグを変更するものを書くのは嫌です。 –

答えて

関連する問題