5

我想在不使用绝对定位或表格的情况下使用 CSS 在中心对齐标签/值对（参见屏幕截图）。在那个屏幕截图中，我将值（即 4,500 美元/周）定位为绝对值，然后将标签直接浮动到它上面。但是绝对在 IE 中效果不佳，而且我听说这不是一个好的技术。

但是我怎样才能达到这种效果，其中标签都是正确的，没有绝对的？

替代文字 http://www.amherstparents.org/files/shot.jpg

4

9 回答 9

13

如果您要显示表格数据，那么使用表格并不丢人。

于 2008-10-23T19:08:58.330 回答
9

我很困惑，关于这些数据的表格是什么？记录在哪里？不同字段的行并不能真正组成传统意义上的表格。（也没有破解它每行有两条记录）

如果我们接受这个想法，那么桌子的左半边和右半边有什么区别？如果有的话，列标题会是什么？

我更喜欢定义列表建议，它绝对比表格更合适。如果所有的 DT 和 DD 都是 float:left 和 width:25%，并且按照以下顺序排列，则不需要两列：成本、宠物、睡眠、吸烟等...因此您可以使用 1 个定义列表，因为它真的应该是。

尽管您可能需要在每个其他 DT 上使用 clear:left ，以防这些元素的内容包含两行。

<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-23T20:16:21.393 回答
3

使用带有 CSS text-align属性的固定宽度 div。不要忘记将您的 div 向左浮动。

于 2008-10-23T19:09:31.387 回答
3

假设您正在使用 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 个定义列表，并将它们浮动

于 2008-10-23T19:15:04.667 回答
2

@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-23T19:20:11.397 回答
2

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

于 2008-10-23T19:42:39.150 回答
0

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

于 2008-10-23T19:30:26.837 回答
0

关于使用表实现这一点的快速说明，有几个结构可以使这很容易访问。其中最简单的方法是使用 TH 作为标签，使用 TD 作为值。 这个网站有一个很好的讨论，并且更深入地研究了单元格标题等内容。

于 2008-10-23T19:44:17.477 回答
0

我一直将定义列表视为用于项目的定义，而不是用于键/值对。（9 不是“卧室”的定义）。然而，这种特殊的结构（键/值对列表）多年来一直引起争论，因为没有适当地反映它的本地语义标记。

如果您不知道定义是什么，请选择 DL。或者去找一张桌子。如果标题/单元格范围设置正确，则具有行中键/值对的表是完全有效的。我最近一直在这样做，它似乎是语义上最准确的表示。

于 2008-10-24T07:52:01.767 回答