可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have <dl>, and can't style it to look like this:

Is it possible to style a definition list like that? Or maybe, better idea would be table?

回答1:

D4V360 was almost there. This variant will handle longer entries which fall over onto subsequent lines (like the example in the linked image):

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

Note that the margin-left value for the dd element should be the same as the width value of the dt element. This is what causes subsequent lines for longer entries to start from the correct point. Adjust both values together to attain your desired spacing.

回答2:

Sure, you can go with something like this (offcourse with your CSS from an external source):

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

回答3:

This basically works:

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

It triggers the Double Margin Float Bug in IE6, though.