排隊多個dd標籤

我有一個dl，其中dt可能有多個我想排隊的dd。不幸的是，第二條生產線向左移動。如何調整造型以防止這種情況發生？我無法編輯HTML，因爲我從應用程序中獲得它，這僅僅是一個示例，每頁有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

出於好奇，這個問題解決了您的滿意嗎？或者在發佈的解決方案中存在突出問題？ – 2012-07-22 22:34:02

方式一：

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 2010-12-07 22:38:03

你也不能使用多個dd的，只是把所有的信息到一個單一的dd。

來源

2010-12-07 22:41:57 matthewpavkov

除了我從應用程序獲得dd，我真的不想寫更改標籤的東西，因爲它們包含一些JavaScript依賴的類屬性，這裏沒有顯示。 – 2010-12-07 23:55:37

排隊多個dd標籤

回答

相關問題