DL像一張桌子

我在300px寬的容器中有以下DL。DL像一張桌子

<style type="text/css"> 
dl {width: 300px} 
dt { 
    float:left; 
    clear: left; 
    width: 70px; 
} 
</style> 
<dl> 
    <dt>Row1</dt> 
    <dd>Value1</dd> 
    <dt>Row2</dt> 
    <dd>Value2</dd> 
    <dt>Row3 with longer title requiring line breaks</dt> 
    <dd>Value 3</dd> 
    <dt>Row4</dt> 
    <dd>Value4</dd> 
    <dt>Row5</dt> 
    <dd>Value5.1</dd> 
    <dd>Value5.2</dd> 
    <dt>Row6</dt> 
    <dd>Value6.1</dd> 
    <dd>Value6.1</dd> 
    <dd>Value6.1</dd> 
</dl>

我該如何調整的項目，看起來像一個表，即：

已經在左欄DT和DD S IN右欄
一行x和valueX頂端對齊
多DD s（對於一個DT）彼此

下面列出

我找到了多個相關問題here，here和here，但既沒有我設法頂部對齊的不同情況（DT比DD較高，多DD S是不是DT更高）。

來源

2013-04-01 Peter Albert

你的意思是這樣嗎？ http://jsfiddle.net/8VKng/ –

@ExplosionPills：幾乎 - 只需要多個「DD」在彼此之下，而不是彼此相鄰... –

如果您使用'width：auto; 'dt's唯一的問題是長標題的... – DarkAjax

我認爲這個解決方案將符合你想要的一些小調整。基本上，你還需要漂浮所有的dd，但你需要清除它們，以便它們垂直堆疊。但是，由於您需要將dt浮動到左側，因此無法清除第一個。 +（下一個兄弟）選擇器對此很方便，因爲您可以覆蓋dt後面的第一個dd上的clear規則。您可能還需要更新其他dd的餘量。

dl {width: 300px} 
dt { 
    float:left; 
    clear: left; 
    width: 70px; 
} 
dd { 
    clear: left; 
    float: left; 
    margin-left: 70px; 
} 
dt + dd { 
    float: left; 
    clear: none; 
    margin-left: 0; 
}

http://jsfiddle.net/8VKng/2/

來源

2013-04-01 22:16:13

這很好，謝謝！ –

只是試圖在真實網站中實現它，但又被卡住了。如果'DT'有換行符，則下一個'DD'未對齊 - 請參閱http://jsfiddle.net/8VKng/10/中的紅色DD。謝謝你的幫助！ –

@PeterAlbert不幸的是，我不認爲純粹的CSS解決方案可能完全符合*你想要的東西，因爲有些測量結果不能提前知道，但這與我所能得到的一樣接近：http：// jsfiddle .net/8VKng/11/- 使用'float：right'是因爲否則左邊可能會有額外的餘量;如果這樣做不好，你還需要在'dd'上設置一個寬度+'text-align：left'：http://jsfiddle.net/8VKng/12/ –

我會使用Bootstrap來爲你處理DL。

Bootstrap Description List

他們有兩個選擇，你也可以定製自己設置爲自己的喜好。只是一個建議。

.dl-horizontal:before, 
.dl-horizontal:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.dl-horizontal dt { 
    float: left; 
    width: 160px; 
    clear: left; 
    text-align: left; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.dl-horizontal dd { 
    margin-left: 180px; 
}

http://jsfiddle.net/rzWnG/1/

這是什麼引導使用，使水平DL。我簡化了一下，看看你想要什麼。我從他的JSfiddle中使用了Explosion Pills html。爲此，我會給他一個upvote。

試試這個。這將有助於更準確地確定你想要的東西。

來源

2013-04-01 22:06:23 ralliart2004

不幸的是，我不能使用Bootstrap .-( –

@PeterAlbert我感覺對你來說，你是不是想讓它與我鏈接的bootstrap文檔中的水平解析列表類似？我可以檢查bs核心，看看它們是如何設計的 – ralliart2004

謝謝 - 這個解決方案的工作原理!!! +1。剛剛接受ExplosivePills答案，因爲它稍微快一點！非常感謝你的努力！ –

回答

相關問題