CSS: <DL> с интервалом/разностью между парами dt/dd

У меня есть следующий html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

Я хотел бы описать это как (вместо нормального dl, который ставит термин и определения друг под друга):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

Это не проблема. Проблема в том, что я хотел бы добавить разницу между каждой парой терминов/определений. Проблема заключается в том, что определения не имеют одинаковой высоты (они варьируются от 0 до 5 элементов списка), поэтому я не могу применить одинаковый маркер в тегах dd.

Ответы

Ответ 1

Как это?

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }

Ответ 2

Вы имеете в виду что-то вроде:

Item 1    Value 1

Item 2    

Item 3    Value 1
          Value 2
          Value 3

Потому что тогда я не понимаю, почему вы не можете применить маржу к элементам dd. Я сделал быстрый эксперимент, используя следующий CSS:

ul { 
  margin: -1.2em 0 0 100px; 
  padding: 0; 
}

dd { 
  margin-bottom: 10px;
}

Кажется, что вам нужен эффект.

Ответ 3

Я думаю, что правильное использование dl, dt и dd не использует ul li внутри dd, но вместо этого использует разные dd. Мне кажется, что вы используете список внутри элемента, который сам по себе должен быть включен.

<dl>
    <dt>Item 1</dt>
    <dd>Value 1</dd>
    <dt>Item 2</dt>
    <dd>
       &nbsp;
    </dd>
    <dt>Item 3</dt>
    <dd>Value 1</dd>
    <dd>Value 2</dd>
    <dd>Value 3</dd>
</dl>

Для CSS вы можете использовать это:

DL {
PADDING: 0; MARGIN: 0; }
DT {
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; }
DD {
PADDING: 0; MARGIN: 0 0 0 5em; }

Ответ 4

Является ли ваш "Item 2" dd действительно пустым или у него есть &nbsp; в нем? Если он пуст, будет сложно получить правильную линию dt/dd, потому что другой dd будет иметь высоту 20 пикселей (например), а пустой dd будет иметь высоту 0.

Будьте осторожны с верхним краем, вам нужно будет применить его как к dt, так и к dd.

Я предпочитаю использовать дополнение в нижней части dd. Это дает более последовательные результаты.

dt {
    float: left;
    clear: left;
    width: 8em;
    }
 dd {
    margin: 0 0 0 9em;
     padding: 0 0 2.5em 0;
    }