422 0
Дизайн для списка dl
Элементы dl, dt, dd предназначенных для создания списка определений.
<dl> – общий контейнер (Description List),
<dt> – термин (Description Term),
<dd> – определение этого термина (Description Definition).
Пример оформления списка dl:
- Ширина:
- 826 мм
- Высота:
- 523 мм
- Гарантия:
- 12 мес.
- Дополнительно:
- оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка
Виконуваний код:
<![CDATA[<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>]]>