如何设置名称 - 值对列表以显示为HTML表格？

Question

我继承了使用纯HTML和ASP.NET服务器控件布局的Web表单报表,常见的布局模式是使用四列表格布局的部分,第一列和第三列用于字段标签,第二列和第四列用于字段标签值的列.

由于我的任务是"重新设置皮肤"报告,我认为我会尝试改进标记的语义并删除所有不用于实际表格数据的表.在对名称 - 值对的定义列表进行一些实验之后,我决定使用ol/li组合,但我无法弄清楚如何在每个li中获取两个文本元素以占据整个li元素的宽度的50%.

这是列表的css:

ol.name-value
{
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

这是HTML:

<div class="span-12">
    <ol class="name-value" style="width: 100%;">
        <li>                    
            <label for="about">Client</label>
            <span id="about">Apartment Applied Visual Arts</span>
        </li>
        <li>
            <label for="about">Report Date</label>
            <span id="Span1">2011/08/08 16:50:10</span>
        </li>
        <li>
            <label for="about">Report No.</label>
            <span id="Span2">33251</span>
        </li>
    </ol>
</div>

这就是我得到的结果."报告详细信息"部分是一个两列表,其中"报告详细信息"是上面的有序列表.我想要获得清单

Answer 1

试试这个:

ol.name-value {
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

ol.name-value li label {
    display: table-cell;
    width: 50%; 
}

ol.name-value li span {
    display: table-cell;
    width: 50%; 
}