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