如何风格< dl>如图所示？ [英] How to style <dl> as shown in image?

问题描述

我有< dl> ，并且不能将其风格设置为：

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

img src =https://i.stack.imgur.com/QHFOq.pngalt =所需造型的图片>

是否可以这样的定义列表？或者，更好的主意是表格？

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

推荐答案

D4V360几乎在那里。此变体将处理更长的条目，将其转到后续行（如链接图像中的示例）：

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>

请注意， margin-left dd 元素应与 dt 的 width $ c>元素。这是什么原因导致后续行从更长的条目从正确的点开始。将两个值一起调整以达到所需的间距。

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.

这篇关于如何风格< dl>如图所示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！