CSS：< DL>在dt / dd对之间具有间距/余量 [英] CSS: <DL> with spacing/margin between the dt/dd pairs

问题描述

我有以下html：

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

我想把它布置成（而不是正常的dl，彼此）：

I would like to lay it out like (instead of the normal dl which puts the term and definitions under each other):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

这不是问题。问题是，我想在每个术语/定义对之间添加一个边距。问题是定义的高度不一样（它们在0到5个列表项之间），所以我不能在dd标签上应用相同的边距。

Which is not a problem. The problem is that I would like to add a margin between each term/definition pair. The problem is that the definitions are not the same height (they range between 0 up to 5 list items), so I cannot apply the same margin on the dd tags.

推荐答案

如何？

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }

这篇关于CSS：< DL>在dt / dd对之间具有间距/余量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！