內嵌定義列表

我試圖讓一個定義列表，這樣的術語和定義是內聯與CSS正常顯示，但一前一後的多個方面或定義顯示爲一個塊元素。所以內嵌定義列表

<dl> 
    <dt>Term</dt> 
    <dd>Definition</dd> 
    <dt>Term</dt> 
    <dd>Definition</dd> 
    <dt>Term</dt> 
    <dd>Definition</dd> 
    <dd>Definition</dd> 
</dl>

應顯示爲：

期限定義
期限定義
期限定義
定義

但由於某些原因，它不排隊對。如果我有像上述簡單的代碼，它工作正常，但如果我包括<dd>內的任何塊元素失敗，使一切塊元素。我不想要這個。我正在使用這個CSS：

dl.inline dt, dl.inline dd { 
    display: inline; 
    float: left; 
    margin: 0 0.5em 0 0; 
} 

dl.inline dd + dt, dl.inline dd + dd { 
    clear: left; 
}

我錯過了什麼讓它表現？

來源

2011-04-18 Robbie

在什麼瀏覽器，你測試此？在鉻12 FF4它看起來好嗎http://jsfiddle.net/VirusZ/E6qqP/ – 2011-04-18 09:20:28

你意識到了嗎'顯示：內聯; float：left'是多餘的？如果指定'float：left'，則'display'會自動設置爲'block'。對於還設置'顯示的唯一用途：inline'是修復浮子利潤率* IE6 *。你關心IE6嗎？ – thirtydot 2011-04-18 09:24:15

你還沒有給你的類標籤.... 你這個.... – Karthik 2011-04-18 09:26:09

浮動元件被自動顯示爲一個塊元件和顯示：直列規則被忽略。

dl.inline dt, dl.inline dd { 
    display: inline; 
} 
dl.inline dt { 
    font-weight: bold; 
}

如果你想設置保證金的權利，你必須使用display：inline-block的

來源

2011-04-18 09:26:32 UnikZ

這是你以後在做什麼？

http://jsfiddle.net/nLGar/1/

dl.inline dt, dl.inline dd { 
    float: left; 
    margin: 0 0.5em 0 0; 
    background: #ccc 
} 
dl.inline dd + dt, dl.inline dd + dd { 
    clear: left 
} 
dl.inline dd + dd { 
    float: none 
} 
dl.inline dt { 
    font-weight: bold 
}

來源

2011-04-18 09:33:34 thirtydot

內嵌定義列表

回答

相關問題