Как правильно сверстать характеристики такого плана?
Собственно интересно, делать таблично или блочно? И вопрос с точками... как их растягивать? border-bottom?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕще вариант:
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
ul li {
display: block;
overflow: hidden;
position: relative;
}
.item__label {
display: inline-block;
position: relative;
}
.item__label:after {
content: '';
position: absolute;
left: 100%;
right: -9999px;
bottom: 0;
border-bottom: 1px dotted #888;
}
.left {
width: 80%;
overflow: hidden;
position: relative;
float: left;
}
.item__cor {
width: 20%;
float: right;
}
<ul>
<li>
<div class="left">
<span class="item__label">Вес</span>
</div>
<span class="item__cor">36 шт</span>
</li>
<li>
<div class="left">
<span class="item__label">Количество на поддоне</span>
</div>
<span class="item__cor">48 шт</span>
</li>
<li>
<div class="left">
<span class="item__label">Прочность</span>
</div>
<span class="item__cor">200 - 400 кг/см</span>
</li>
</ul>
То же с таблицей:
table {
width: 100%;
}
.cur {
width: 30%;
}
.name {
overflow: hidden;
}
.name span {
display: inline-block;
position: relative;
}
.name span:after {
content: '';
display: inline-block;
border-bottom: 1px dotted #333;
position: absolute;
left: 100%;
right: -9999px;
bottom: 0;
}
<table>
<tbody>
<tr>
<td class="name"><span>Вес</span></td>
<td class="cur">36 шт</td>
</tr>
<tr>
<td class="name"><span>Количество на поддоне</span></td>
<td class="cur">48 шт</td>
</tr>
<tr>
<td class="name"><span>Прочность</span></td>
<td class="cur">200 - 400 кг/см</td>
</tr>
</tbody>
</table>
Семантически подобные списки ближе к definition list (теги dl
, dt
, dd
). Только пара "термин-определение" идет в одну строку, и после термина идет отточие.
Само отточие здорово передавать именно точками, текстом, а не border-bottom: dotted
.
Рабочий пример:
dl {
line-height: 24px;
margin-bottom: 0;
margin-top: 0;
}
dt {
font-weight: bold;
}
.dt-dotted {
overflow-x: hidden;
position: relative;
width: 200px;
}
.dt-dotted > span {
position: relative;
}
.dt-dotted > span:after {
color: #000;
content: '..............................................................';
left: 100%;
position: absolute;
top: 0;
}
dd {
margin-left: 0;
position: relative;
}
.dl-inline > dt {
clear: left;
float: left;
margin-right: 3px;
}
.dl-inline > dd {
display: inline-block;
margin-left: 0;
}
<dl class="dl-inline">
<dt class="dt-dotted">
<span>Вес</span>
</dt>
<dd>36 шт</dd>
</dl>
<dl class="dl-inline">
<dt class="dt-dotted">
<span>Количество на поддоне</span>
</dt>
<dd>48 шт</dd>
</dl>
<dl class="dl-inline">
<dt class="dt-dotted">
<span>Прочность на сжатие</span>
</dt>
<dd>200-400 кгс/см</dd>
</dl>