html - 如何制作水平描述列表？

Question

我试着让它看起来像

Cups:                                   Dressy: MessySugar and TeeGood For Kids: SureCharity: YesLuckStrike: No

But I can't get the CSS correct. I tried using display inline/block combo on the dd/dt tags, but it just got messed up especially if I want the first one, Cups: to have a break in the line.

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

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

Answer 1

试试这个，有类来指定列，例如。 column和 column1_2对于左列和 column2_2对于右栏。然后默认 <dt>和 <dd>将使用 clear 在自己的行中显示属性(property)。为了让事情在同一条线上，然后使用 inline删除 clear 的类名.

为了演示，我将类名精简到最少:

<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/