How to style
as shown in image?

2019-03-22 07:13发布

站内问答 / HTML/CSS
1558 3 6

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

image of desired styling

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

标签： html css xhtml
举报
3条回答
女痞
2楼-- · 2019-03-22 07:19

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>
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-03-22 07:24

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.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2019-03-22 07:28

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)