在多列、多行<dl>中堆叠<dt>和<dt>
在多列、多行<dl>中堆叠<dt>和<dt>
提问于 2013-02-05 06:02:52
有没有可能得到这样的造型？
从这段代码(使用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;}回答 4
Stack Overflow用户
回答已采纳
发布于 2013-02-05 09:09:23
表本身并不是不可访问的。只有当它们用于显示而不是表示表格数据时，这才是一个问题。你确实有表格数据，只是碰巧有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>Stack Overflow用户
发布于 2013-02-05 06:19:47
这是一个基本的解决方案，看起来很糟糕，但通过这种结构，您应该能够在满足需求后对其进行改进：
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;
}Stack Overflow用户
发布于 2013-02-05 06:07:20
是的，这是可能的。Andy Clark喜欢使用各种列表，我已经多次使用dl了。
你只要把它当做ol/ul就行了。先去掉页边距/填充。
给dt分配一个类，浮点它们，但是你必须给第二行分配一个不同的类。有时并不是设置了DL容器的宽度，dt将环绕，但要真正控制dt的第二行(V (mm/y)和-6.4 ..that行)，您可以指定另一个类和样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14696483
复制相关文章
相似问题
腾讯云开发者
