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

Question

有可能得到這個外觀

從這段代碼（使用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

這是一個基本的解決方案，看起來很糟糕，但有了這個結構，你應該能夠在你的要求之后改進它：

小提琴

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