Question

我有以下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）：

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

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

Answer 1

这是怎么回事？

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

Answer 2

你的意思是：

Item 1    Value 1

Item 2    

Item 3    Value 1
          Value 2
          Value 3

因为那时我不明白为什么你不能在dd元素上应用边距。我使用以下CSS进行了快速实验：

ul { 
  margin: -1.2em 0 0 100px; 
  padding: 0; 
}

dd { 
  margin-bottom: 10px;
}

这似乎有你需要的效果。

Answer 3

我认为正确使用dl，dt和dd并未在ul内使用li dd，但而是使用不同的dd。在我看来，你在一个元素中使用一个列表，它本身就是列表。

<dl>
    <dt>Item 1</dt>
    <dd>Value 1</dd>
    <dt>Item 2</dt>
    <dd>
       &nbsp;
    </dd>
    <dt>Item 3</dt>
    <dd>Value 1</dd>
    <dd>Value 2</dd>
    <dd>Value 3</dd>
</dl>

对于CSS，你可以使用它：

DL {
PADDING: 0; MARGIN: 0; }
DT {
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; }
DD {
PADDING: 0; MARGIN: 0 0 0 5em; }

Answer 4

你的'第2项'dd真的是空的还是其中有 ？如果它是空的，则很难使dt / dd正确排列，因为其他dd的高度为20px（例如），而空dd的高度为0。

小心使用margin-top，你必须将它应用于dt和dd。

我更喜欢在dd的底部使用填充。它提供了更一致的结果。

dt {
    float: left;
    clear: left;
    width: 8em;
    }
 dd {
    margin: 0 0 0 9em;
     padding: 0 0 2.5em 0;
    }

CSS：<dl>，dt / dd对之间的间距/边距</dl>

4 个答案: