Question

我想使用CSS在中心对齐标签/值对，而不使用绝对定位或表格（参见屏幕截图）。在那个屏幕截图中，我将价值（即$ 4,500 / wk）绝对定位，然后将标签直接对着它浮动。但绝对不能在IE中运行得那么好，我听说这不是一个好技术。

但是，如果标签在没有绝对的情况下完全合理，我怎么能实现这种效果呢？

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

Answer 1

如果您正在显示表格数据，那么使用表格就不会感到羞耻。

Answer 2

我很困惑，有关该数据的表格是什么？记录在哪里？不同领域的行并不能真正成为传统意义上的一张桌子。（对于那个问题，也不是每行都有两条记录）

如果我们对这个想法感兴趣，那么桌子的左半部分与右边的差异是什么？如果有列标题会是什么？

我更喜欢定义列表建议，它绝对比桌子更合适。如果所有的DT和DD都是浮动的，你就不需要两列：左和宽：25％，按以下顺序排列：成本，宠物，睡眠，吸烟等...因此你可以使用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>

Answer 3

将固定宽度div与CSS text-align属性一起使用。别忘了把你的div留下来。

Answer 4

假设你正在使用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; }

编辑：正如Chris Marasti-Georg指出：

此外，如果你想要2列，使用2个定义列表，然后浮动它们

Answer 5

@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指出定义列表在这里更合适。我同意，但我想我想表明使用任何块级元素都可以轻松完成相同的操作，并且在实现此目标所需的定义列表的默认样式中没有任何内容。

Answer 6

扩展Rahul的帖子：

<强> 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下进行了测试。背景颜色就是帮助您可视化列开始和结束的位置。

Answer 7

如何使用表格来布局表格，然后使用CSS将表格放在页面上的任何位置？

Answer 8

使用表格实现此功能的快速说明，有几个结构可以使这些很容易访问。最简单的方法是使用TH作为标签，使用TD作为值。 This site有一个很好的讨论，并深入研究像单元格的标题等等。

Answer 9

我一直将定义列表视为用于项目的定义，而不是用于键/值对。（9不是'卧室'的定义）。但是，这个特定的构造（键/值对列表）多年来一直引起争论，因为没有正确反映它的本地语义标记。

如果你不是关于定义是什么的肛门，请去DL。或者去一张桌子。如果正确设置了标头/单元范围，则行中具有键/值对的表是完全有效的。我最近一直这样做，它似乎是最语义准确的表示。

CSS定位问题 - 表与绝对与DL

9 个答案: