使用CSS設計dl和dt以模仿類似表格的演示文稿

使用CSS設計某些dl和dt元素有以下問題。我更喜歡總是使用與IE6/IE7和現代瀏覽器兼容的非常基本的CSS。我試圖得到一個效果，對我來說應該是相當簡單的實現。使用CSS設計dl和dt以模仿類似表格的演示文稿

這裏是最初的源代碼，我有工作，去嘗試，只是這個問題上工作的一個精簡版：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 

     <style type="text/css"> 

     .terms dl { 
      float: left; 
      padding-left: 0px; 
     } 

     .terms dt, .terms dd { 
      text-align: center; 
      margin: 0px; 
      float: left; 
     } 

     .terms dt { 

      border: solid blue 1px; 
      clear: left;  
     } 

     .terms dd { 
      border: solid red 1px; 
      margin-right: 40px; 
      margin-left: 40px; 
     } 

     </style> 
    </head> 
    <body> 
     <div class="terms"> 
      <h1>Terms</h1> 
      <dl> 
       <dt>Term 1:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 2:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 3 with longer term title:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 4:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 5:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 6:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
      <dl> 
       <dt>Term 7:</dt> 
       <dd>Defintion for term</dd> 

       <dt>Term 8:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 9:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 10:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 11:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 12:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
     </div> 
    </body> 
</html>

這裏的視覺效果。我風格的藍色和紅色邊框，使其更容易顯現：

enter image description here

我的目標是讓所有的藍色和紅色的「盒子」，以具有相同的寬度無論文字大小集是什麼。例如。如果用戶有一個默認樣式表來使文本非常大，它應該相應地擴展。這個問題不僅出現在人們使用自己的樣式表時，它也出現在IE6中，當人們選擇「中等」以外的「文本大小」時 - 它使文本更大，我希望能夠適應這種情況。

我不認爲我想要在任何「盒子」上設置一個很寬的寬度，而且我不希望任何文本的包裝或浮動物掉下來，這兩個列樣式。

如果我不夠清楚，我可以編輯更多圖片和示例的答案。

此外，這是一個相關的，但單獨的問題。如果瀏覽器窗口重新調整大小，那麼當您減小寬度時，會希望表格的一部分不再可見。有了這個設置，你會看到一個非常奇怪和醜陋的結果，如下所示。這怎麼可以避免？

enter image description here

UPDATE

似乎沒有不涉及給予固定的寬度的的元素（和/或封裝元件）中的溶液。另外，似乎只能通過將文本設置爲像素大小並且不讓它們重新調整大小來解決IE6文本大小調整問題。

來源

2012-03-08 user17753

那你爲什麼不使用表格呢？ – zgood 2012-03-08 14:25:39

語義目的，標記代表術語和定義的列表;不是表格數據。我想將標記的語義與風格分開。據我所知，這是'dl'元素和CSS的目的。 – user17753 2012-03-08 14:36:25

表格本身並不是邪惡的，不惜一切代價避免。它們適用於顯示，驚喜，表格數據 - 它看起來確實適用於這種情況。 – chris 2012-03-08 14:38:21

你可以只指定固定的寬度：XXpx每個元素的這樣

http://jsfiddle.net/XKaKT/1/

來源

2012-03-08 15:19:19 Evert

我認爲，沒有固定寬度沒有辦法做到這一點？ – user17753 2012-03-20 20:57:00

任何可變寬度都意味着你的列不再垂直排列，因爲它們可以單獨拉伸，但是如果這使得它更加可用，則可以使用這樣的百分比寬度：http://jsfiddle.net/XKaKT/2/ – Evert 2012-03-20 23:34:47

爲了您的窗口大小調整問題，只是寬度增加了「.terms」分區：

.terms{ 
    width:1000px; 
}

來源

2012-03-08 15:09:27 zgood

我認爲，沒有固定寬度沒有辦法做到這一點？ – user17753 2012-03-20 20:57:10

A DL列表和正確標記爲兩列表實際上與語義非常相當。所以，你可以放心地使用表這裏（注意TH元素與scope屬性）：

<table> 
    <tr> 
     <th scope="row">Term 1:</th> 
     <td>Very Long definition for this term here<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 2:</th> 
     <td>Definition for term<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 3 with longer term title:</th> 
     <td>Definition for term<td> 
    </tr> 
    <!-- ... --> 
</table>

如果使用DL是首選，可以考慮使用一個無序列表包含每個項目separate DL恰好與一個DT/DD組內。

來源

2012-03-08 16:33:48

也有類似的問題，這裏有一個解決方案，但它在很大程度上配件依賴於每一個DT-DD一對只有1行，所以它可能脆弱你的目的：

這裏的一般策略是你想要的DL成爲一個內嵌塊，並且DT是塊，因此它們自動具有相同的寬度。這也可以讓你對所有的DT進行右對齊，如果這符合你的造型，並且你控制DT中元素之間的間距。

dl { 
    line-height: 2; 
    display: inline-block; 
    position: relative; 
} 

dt { 
    text-align: right; 
    margin-right: 1em; 
}

現在，您需要到DDS定位到DTS的權利，這是什麼使這個脆弱的，因爲DDS的不能很好地適應變化的內容。

dd { 
    position: absolute; 
    left: 100%; 
    margin-top: -2em; /* negate the DL line-height */ 
    white-space: nowrap; /* without this, DDs will be the same length as DTs 
}

請注意，對DL設置寬度限制將驅動您的DT，並且您的DD根據您的DT進行大小調整。

來源

2012-06-13 23:13:44

使用CSS設計dl和dt以模仿類似表格的演示文稿

回答

相關問題