CSS定位問題 - 表與絕對與DL

我想使用CSS對齊中心的標籤/值對，而不使用絕對定位或表格（請參閱截圖）。在該屏幕截圖中，我定位了絕對值（即$ 4,500 /周），然後將標籤向上浮動。但絕對在IE中效果不好，我聽說它不是一個好技術。CSS定位問題 - 表與絕對與DL

但是我怎麼能達到這種效果，哪裏的標籤都沒有絕對的正當理由？

alt text http://www.amherstparents.org/files/shot.jpg

2008-10-23 Baer

以下評論有一點。這是表格數據，爲什麼不使用表？ – 2008-10-23 19:11:47

儘管它可以被視爲表格數據，但可視化顯示（2組鍵=>值對）在可訪問性方面使其變得很難，如果它是表格。你也可以將它看作一列鍵列和值，它們恰好顯示在2列中......所以使用CSS定位也是一個解決方案。 – Rahul 2008-10-23 19:31:42

（當然，你可以製作兩個表格並將它們彼此相鄰放置，這也可以起作用。） – Rahul 2008-10-23 19:32:27

我很困惑，表格有關該數據？記錄在哪裏？不同領域的行在傳統意義上並不是真正的表格。（對於這個問題，也不會破壞每行兩條記錄）

如果我們對這個想法有所瞭解，那麼表格的左半部分和右半部分有什麼不同？如果有任何列標題，會是什麼？

我更喜歡定義列表的建議，它絕對比表格更適合。如果所有的DT和DD都是float：left和width：25％，並且按照以下順序：Cost，Pets，Sleeps，Smoking等等，則不需要兩列。因此，您可以使用1個定義列表，因爲它確實應該是。

儘管您可能需要在每個其他DT上留下一個明確的字符，以防萬一這些元素的內容包裝在兩行中。

<style> 
    dl 
    { 
     float:left; 
     width:100%; 
    } 
    dt, 
    dd 
    { 
     float:left; 
     width:24%; 
     margin:0; 
     padding:0; 
    } 
    dt 
    { 
     text-align:right; 
     padding-right:.33em; 
    } 
    dd 
    { 
     text-align:left; 
    } 
</style> 
<dl> 
    <dt>Cost:</dt> 
    <dd>$4,500/wk</dd> 
    <dt>Pets:</dt> 
    <dd>No</dd> 
    <dt>Sleeps:</dt> 
    <dd>1</dd> 
    <dt>Smoking:</dt> 
    <dd>No</dd> 
</dl>

來源

2008-10-23 20:16:21

如果你正在展示表格數據有一個在使用表沒有羞恥。

來源

2008-10-23 19:08:58

在這種情況下，將文本放在表格中甚至是有益的，因爲它是表格的標題，因此是表格的「標題」。其他類別也是如此，但它將其添加到語義值中。 – cdeszaq 2008-10-23 19:14:38

這不是表格數據。這並不是說表格不一定是不恰當的，但這是一組標籤/值對，而不是包含行和列的表格。 – 2008-10-23 21:32:29

使用固定寬度的div與CSS text-align屬性。別忘了把你的div放在左邊。

來源

2008-10-23 19:09:31

比方說，你正在使用DL，DT和DD：

<dl> 
<dt>Cost:</dt> 
<dd>$4,500/wk</dd> 
<dt>Sleeps:</dt> 
<dd>1</dd> 
</dl>

您可以使用以下近似CSS（未經測試）：

dl { width: 200px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; }

編輯：正如克里斯Marasti - 格奧爾格指出：

此外，如果你想2列，使用2定義列表，並把它們飄浮

來源

2008-10-23 19:15:04 Rahul

此外，如果您需要2列，請使用2個定義列表，並將它們浮動。 – 2008-10-23 19:26:32

@jon是正確的，如果它的表格數據，你可以使用一個表。但是，如果你真的不想使用一個表，我認爲這是你想要的東西：

CSS

.label { 
    min-width: 20%; 
    text-align: right; 
    float: left; 
}

HTML

<div class="pair"> 
    <div class="label">Cost</div> 
    <div class="value">$4,500/wk</div> 
</div> 
<div class="pair"> 
    <div class="label">Sleeps</div> 
    <div class="value">1</div> 
</div> 
<div class="pair"> 
    <div class="label">Bedrooms</div> 
    <div class="value">9</div> 
</div>

編輯 @ Chris Marasti-Georg指出，定義列表在這裏更合適。我同意，但我想我想表明，使用任何塊級元素都可以輕鬆完成，並且定義列表的默認樣式中沒有任何內容需要完成此目標。

來源

2008-10-23 19:20:11 pkaeding

如何使用表佈局表格，然後使用CSS將表格定位到您的頁面所需的任何位置？

來源

2008-10-23 19:30:26 BoboTheCodeMonkey

擴大對拉胡爾的帖子：

CSS

#list { width: 450px; } 
#left { float: left; background: lightgreen; } 
#right { float: right; background: lightblue; } 
dl { width: 225px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; padding-left: 5px; }

HTML

<div id="list"> 
    <dl id="left"> 
     <dt>Cost:</dt> 
     <dd>$4,500/wk</dd> 
     <dt>Sleeps:</dt> 
     <dd>1</dd> 
     <dt>Bedrooms:</dt> 
     <dd>9</dd> 
     <dt>Baths:</dt> 
     <dd>6</dd> 
    </dl> 
    <dl id="right"> 
     <dt>Pets:</dt> 
     <dd>No</dd> 
     <dt>Smoking:</dt> 
     <dd>No</dd> 
     <dt>Pool:</dt> 
     <dd>No</dd> 
     <dt>Waterfront:</dt> 
     <dd>No</dd> 
    </dl> 
</div>

我測試了下，FF 3.0.1，IE6和IE7。背景顏色僅用於幫助您可視化列開始和結束的位置。

來源

2008-10-23 19:42:39 Mike