Question

我试图让它看起来像

Cups:                                   Dressy: Messy
Sugar and Tee
Good For Kids: Sure
Charity: Yes
LuckStrike: No

但我无法让CSS正确。我尝试在dd / dt标签上使用display inline / block combo，但它只是搞砸了，特别是如果我想要第一个，Cups：在一行中断。

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

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

Answer 1

试试这个，有类来指定列，例如。左列为column和column1_2，右列为column2_2。然后，默认情况下，<dt>和<dd>将使用clear属性在自己的行中显示。要使事情处于同一行，请使用删除inline的{{1}}类名。

我将班级名称剥离到最低限度以证明：

clear

CSS：

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

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

如何制作水平描述清单？

1 个答案: