html - 如何制作横向描述列表？

Question

我试图让它看起来像

杯子：考究：凌乱
糖和三通
对孩子有好处：当然
慈善机构：是的
幸运打击：没有

但我无法让 CSS 正确。我尝试在 dd/dt 标签上使用显示内联/块组合，但它只是搞砸了，特别是如果我想要第一个，杯子：在线路中休息。

dl {
  width:100%;
  overflow:hidden;
}

其余代码：http: //jsfiddle.net/eUk2h/3/

Answer 1

试试这个，有类来指定列，例如。对于左列和column右列。然后默认情况下and将使用属性显示在他们自己的行上。为了让事情在同一行，然后使用删除. column1_2column2_2<dt><dd>clearinlineclear

我将类名精简到最少来演示：

<div>
    <dl class="column column1_2">
        <dt>Cups:</dt>
        <dd>Sugar and Tee</dd>

        <dt>Good for Kids:</dt>
        <dd class="inline">Sure</dd>

        <dt>Charity:</dt>
        <dd class="inline">Yes</dd>

        <dt>LuckStrike:</dt>
        <dd class="inline">No</dd>
    </dl>
    <dl class="column column2_2">
        <dt>Dressy:</dt>
        <dd class="inline">Messy</dd>
    </dl>
</div>

CSS：

.column {
    float: left;
}
.column1_2,
.column2_2 {
    width: 50%;
}
.column dd {
    clear: both;
    margin: 0;
}
.column dt {
    float: left;
    clear: left;
}
.column .inline {
    clear: none;
    float: left;
    margin-left: 10px;
}

请参阅工作示例：http: //jsfiddle.net/pvkZn/