Элементы dl, dt, dd предназначенных для создания списка определений.
<dl> – общий контейнер (Description List),
<dt> – термин (Description Term),
<dd> – определение этого термина (Description Definition).
Пример разметки:
<dl>
<dt>Термин №1</dt>
<dd>Описание термина №1</dd>
<dt>Термин №2</dt>
<dd>Описание термина №2</dd>
<dt>Термин №3</dt>
<dd>Описание термина №3</dd>
</dl>dl {
margin: 0 0 5px 0;
}
dt{
font-weight: bold;
margin: 0 0 5px 0;
}
dd {
margin: 0 0 15px 0;
}Результат:
dt:after {
content: ":";
}Результат:
<dl class="attrs">
<dt>Ширина:</dt>
<dd>826 мм</dd>
<dt>Высота:</dt>
<dd>523 мм</dd>
<dt>Гарантия:</dt>
<dd>12 мес.</dd>
<dt>Дополнительно:</dt>
<dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd>
</dl>.attrs {
margin: 0 0 20px 0;
overflow: hidden;
}
.attrs dt {
float: left;
margin: 0 10px 0 0;
padding: 5px 0;
color: #808d9a;
}
.attrs dd {
padding: 5px 0;
}Результат:
<dl class="attrs">
<dt>Ширина:</dt>
<dd>826 мм</dd>
<dt>Высота:</dt>
<dd>523 мм</dd>
<dt>Гарантия:</dt>
<dd>12 мес.</dd>
<dt>Дополнительно:</dt>
<dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd>
</dl>.attrs {
margin: 0 0 20px 0;
overflow: hidden;
}
.attrs dt {
margin: 0;
padding: 5px 0;
width: 150px;
float: left;
clear: both;
color: #808d9a;
}
.attrs dd {
margin: 0 0 0 150px;
padding: 5px 0;
}Результат:
<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>.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;
}Результат:
<dl class="attrs-line">
<dt>Ширина:</dt>
<dd>826 мм</dd>
<dt>Высота:</dt>
<dd>523 мм</dd>
<dt>Гарантия:</dt>
<dd>12 мес.</dd>
<dt>Дополнительно:</dt>
<dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd>
</dl>.attrs-line {
margin: 0 0 20px 0;
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.attrs-line dt {
font-weight: 600;
float: left;
clear: both;
margin-right: 10px;
width: 150px;
padding: 5px 0;
border-top: 1px solid #ccc;
}
.attrs-line dd {
border-top: 1px solid #ccc;
margin: 0 0 0 150px;
padding: 5px 0;
}Результат:
Без крайних линий
.attrs-line {
margin: 0 0 20px 0;
overflow: hidden;
}
.attrs-line dt {
font-weight: 600;
width: 150px;
float: left;
clear: both;
margin: 0 10px 0 0;
padding: 5px 0;
border-top: 1px solid #ccc;
}
.attrs-line dd {
margin: 0 0 0 150px;
padding: 5px 0;
border-top: 1px solid #ccc;
}
.attrs-line dt:first-of-type, .attrs-line dd:first-of-type {
border-top: none;
}Результат:
<dl class="attrs-table">
<dt>Ширина:</dt>
<dd>826 мм</dd>
<dt>Высота:</dt>
<dd>523 мм</dd>
<dt>Гарантия:</dt>
<dd>12 мес.</dd>
<dt>Дополнительно:</dt>
<dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd>
</dl>.attrs-table {
margin: 0 0 20px 0;
border: 1px solid #ddd;
}
.attrs-table dt {
box-sizing: border-box;
padding: 10px;
float: left;
width: 35%;
}
.attrs-table dd {
box-sizing: border-box;
padding: 10px;
margin-left: 35%;
border-left: 1px solid #ddd;
background: #fff;
}
.attrs-table dd ~ dt, .attrs-table dd ~ dd {
border-top: 1px solid #ddd;
}Результат:
<dl class="attrs">
<dt>Ширина:</dt>
<dd>826 мм</dd>
<dt>Высота:</dt>
<dd>523 мм</dd>
<dt>Гарантия:</dt>
<dd>12 мес.</dd>
<dt>Дополнительно:</dt>
<dd>оперативная память 1 Гб, USB 2.0х2, внутренняя память 4 Гб, документация, пульт ДУ, настольная подставка</dd>
</dl>.attrs {
margin: 0 0 20px 0;
border: 1px solid #bdc8ca;
}
.attrs dt {
float: left;
width: 35%;
box-sizing: border-box;
padding: 10px;
}
.attrs dd {
margin: 0 0 0 35%;
border-left: 1px solid #ddd;
background: #fff;
box-sizing: border-box;
padding: 10px;
}
.attrs dd ~ dt, .attrs dd ~ dd {
border-top: 1px solid #ddd;
}
.attrs dt:nth-child(4n+1), .attrs dd:nth-child(4n+2){
background: #efefef;
}
