Question

我有<dl>，并且无法将其设置为如下所示：

image of desired styling

是否可以为这样的定义列表设置样式？或许，更好的想法是桌子？

Answer 1

D4V360几乎就在那里。此变体将处理落入后续行的较长条目（如链接图像中的示例）：

<style type="text/css">
    dt {
        width: 200px;
        float: left;
        clear: left;
    }
    dd { margin-left: 200px; }
</style>

<dl>
    <dt>First Item</dt>
    <dd>This is the first item</dd>

    <dt>Second Item</dt>
    <dd>This is the second item</dd>

    <dt>Third Item</dt>
    <dd>Lorem ipsum dolor sit amet... lots more text here...</dd>

    <dt>Fourth Item</dt>
    <dd>Last item</dd>
</dl>

请注意，margin-left元素的dd值应与width元素的dt值相同。这是导致较长条目的后续行从正确点开始的原因。将两个值一起调整以获得所需的间距。

Answer 2

当然，你可以选择这样的东西（从外部来源你的CSS）：

<style type="text/css">
    dt {
        width: 200px;
        float: left;
        clear: left;
    }   
</style>

<dl>
    <dt>Test:</dt>
    <dd>Hallo, this is a test</dd>
    <dt>Test:</dt>
    <dd>Hallo</dd>
    <dt>Test:</dt>
    <dd>Hallo</dd>
</dl>

Answer 3

这基本上有效：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><title></title>
<style type="text/css"><!--
dt{
    border: 1px solid green;
    float: left;
    clear: left;
    width: 200px;
    margin: 0 0 10px 0;
    padding: 0;
}
dd{
    border: 1px solid red;
    margin: 10px 0 10px 210px;
    padding: 0;
}
--></style>
</head>
<body>

<dl>
    <dt>Praesent dapibus posuere nulla:</dt>
        <dd>Eu varius lorem fringilla a.</dd>
    <dt>Integer id magna ut orci condimentum:</dt>
        <dd>Quisque pulvinar purus quis nibh luctus fermentum.</dd>
        <dd>Donec pretium quam id quam bibendum quis blandit tellus blandit.</dd>
        <dd>Vestibulum dignissim nunc et felis luctus dictum.</li>
    <dt>Cras nec nisl in libero:</dt>
        <dd>Vulputate dignissim a commodo ligula.</dd>
    <dt>Integer ut orci vitae lectus eleifend mattis:</dt>
        <dd>Suspendisse ut lorem diam, vel pharetra urna. Vestibulum ultricies, magna at placerat lacinia, nibh mauris pharetra risus, et imperdiet arcu elit sit amet arcu. Sed enim turpis, sodales non facilisis sed, mollis sed quam. Integer quam neque, dapibus et viverra sed, pulvinar vitae odio. Vestibulum hendrerit pellentesque tortor a facilisis.</dd>
</dl>

</body>
</html>

但它会在IE6中触发Double Margin Float Bug。

如何设置<dl>的样式，如图所示？</dl>

3 个答案: