相关疑难解决方法(0)

我继承了使用纯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>

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

该DOA(或者更准确,死之前到达)XHTML2工作标准表示支持的<di>标签.

[...]该术语及其定义可以在一个di要素中分组,以帮助澄清术语与其定义之间的关系.

为了澄清,此标记将用于在以下位置分组<dt>和<dd>标记<dl>:

<dl>
    <di>
        <dt>defenestrate</dt>
        <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd>
        <dd>what I will do if web standards keep going they way they are</dd>
    </di>
</dl>

无论如何,既然<di>是在窗外(嘿),我想知道当前支持的标记模式是什么(如果有的话)可以被描述为语义和​​结构上的等价？我基本上接受了这<dl>不足以满足我的要求(就美学要求而言),所以我正在研究其他解决方案.

我的意图<di>主要是一个样式钩子¹,因为我正在使用一个定义列表,并打算将术语/定义分组设计为单个项目.

为了便于访问,我将使用aria-*和role属性来帮助定义关系,但我希望存在一些普遍接受的模拟结构<di>,我根本没有遇到过.

例如,我正在考虑以下内容:

<ul>
    <li>
        <dfn id="term-1">term</dfn>
        <p aria-labelledby="term-1">definition for term 1</p> …