139 0  

Дизайн для списка dl

Элементы dl, dt, dd предназначенных для создания списка определений.



<dl> – общий контейнер (Description List),
<dt> – термин (Description Term),
<dd> – определение этого термина (Description Definition).


Пример оформления списка dl:

Ширина:
826 мм
Высота:
523 мм
Гарантия:
12 мес.
Дополнительно:
оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка

Исполняемый код:

<div> <dl class="attrs-dotted"> <dt><span>Ширина:</span></dt> <dd>826 мм</dd> </dl> <dl class="attrs-dotted"> <dt><span>Высота:</span></dt> <dd>523 мм</dd> </dl> <dl class="attrs-dotted"> <dt><span>Гарантия:</span></dt> <dd>12 мес.</dd> </dl> <dl class="attrs-dotted"> <dt><span>Дополнительно:</span></dt> <dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd> </dl> </div> <style> .attrs-dotted { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 10px 0; } .attrs-dotted dt { width: 40%; margin: 0 0 8px 0; padding: 0; display: flex; box-sizing: border-box; align-items: flex-end; position: relative; word-break: break-word; color: #808d9a; } .attrs-dotted dt:before { content: ""; display: block; width: 100%; position: absolute; left: 0; bottom: .2em; border-bottom: 1px dotted #d6dbe0; } .attrs-dotted dt span { padding-right: 5px; background: #fff; position: relative; } .attrs-dotted dd { width: 60%; display: flex; box-sizing: border-box; align-items: flex-end; margin: 0 0 8px 0; padding: 0 0 0 5px; word-break: break-word; } </style>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021