Как стиль <dl>, как показано на рисунке? - PullRequest
Новая
       13

Как стиль <dl>, как показано на рисунке?

1 голос
/ 21 января 2010

У меня есть <dl>, и я не могу оформить его так, чтобы он выглядел так:

image of desired styling

Возможно ли оформить список определений таким образом?Или, может быть, лучшей идеей будет таблица?

Ответы [ 3 ]

4 голосов
/ 21 января 2010

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. Именно поэтому последующие строки для более длинных записей начинаются с правильной точки. Отрегулируйте оба значения вместе, чтобы получить желаемый интервал.

2 голосов
/ 21 января 2010

Конечно, вы можете пойти с чем-то вроде этого (конечно, с вашим 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>
0 голосов
/ 21 января 2010

Это в основном работает: 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...