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

Question

我想使用CSS在中心对齐标签/值对,而不使用绝对定位或表格(参见屏幕截图).在那个屏幕截图中,我将价值(即4,500美元/周)绝对定位,然后将标签直接放在它上面.但绝对不能在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>