Question

是否有可能看到这个 What the dl should look like

从这段代码（使用CSS？）

<dl>
<dt>Latitude</dt>
<dd>50.0</dd>
<dt>Longitude</dt>
<dd>100.0</dd>
<dt>h (metres)</dt>
<dd>0.000</dd>
<dt>Vφ (mm/y)</dt>
<dd>-6.4</dd>
<dt>Vλ (mm/y)</dt>
<dd>-15.3</dd>
<dt>Vh (mm/y)</dt>
<dd>-2.0</dd>
</dl>

为了清楚起见，我不关心颜色。这是dt / dd对堆叠多列和多行对我来说很重要。我可以通过表获得我想要的外观，但它无法达到我的可访问性标准。我认为a在语义上更接近我想要的......它实际上是键/值对的列表。

以下是我正在使用的颜色：

dl {border: 1px solid #C8C8C8;}

dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}

Answer 1

这是一个基本的解决方案，看起来很糟糕，但有了这个结构，你应该能够根据你的要求改进它：

Fiddle

CSS：

dl {
    float: left;
    display: block;
    width: 400px;
}

dl dd {
    float: left;
    margin-left: -35px;
    margin-top: 20px;
    width. 100px;
    background-color: #e0e0e0;
    border: 1px solid #777777;
    padding: 5px;
    position: relative;
    display: block;
}
dl dt {
    float: left;
    width. 70px;
    position: relative;
    display: block;
}

Answer 2

桌子本身没什么可以访问的。只有当它们用于显示而不是表达表格数据时才会出现问题。你做有表格数据，它碰巧有2列。仅仅因为它是一个2列的6行表并不意味着它必须看起来像一个。

http://jsfiddle.net/hgWxT/

table, tbody {
    display: block;
}

tr {
    display: inline-block;
    width: 30%;
}

td, th {
    display: block;
}

<table>
    <tr>
        <th>Latitude</th>
        <td>50.0</td>
    </tr>

    <tr>
        <th>Longitude</th>
        <td>100.0</td>
    </tr>

    <tr>
        <th>h (metres)</th>
        <td>0.000</td>
    </tr>

    <tr>
        <th>Vf (mm/y)</th>
        <td>-6.4</td>
    </tr>

    <tr>
        <th>V? (mm/y)</th>
        <td>-15.3</td>
    </tr>

    <tr>
        <th>Vh (mm/y)</th>
        <td>-2.0</td>
    </tr>
</table>

Answer 3

是的，这是可能的。 Andy Clark喜欢使用各种列表，我已多次使用dl。

你只需把它当作ol / ul。首先删除边距/填充。

将一个类分配给dt，浮动它们但是你必须为第二行分配一个不同的类。有时不像DL的容器的宽度设置，dt将环绕，但真正控制第二行dt（V（mm / y）和-6.4 ..该行）你可以分配另一个类和风格。

Answer 4

可能？是的，但不必要的困难。

远远更容易将每个dt / dd组包装在一个元素中，并相应地设置样式。以下是您完成的示例：http://cssdeck.com/labs/jsqdknho

在多列中堆叠<dt>和</dt> <dt>，多行<dl> </dl> </dt>

4 个答案: