Как можно сверстать эти линии разной длины в списке?
4 ответа
Пример тут: ( http://jsfiddle.net/L2ya3buj/ ). Не судите строго за SCSS.
<div class="counter-list">
<ul>
<li>
<span class="key">
Код
</span>
<span class="value">
4607003998708
</span>
</li>
</ul>
</div>
.counter-list {
ul {
li {
display: block;
position: relative;
overflow: hidden;
&:after {
content:'';
display: block;;
overflow: hidden;
height: 14px;
border-bottom: 1px dotted #666
}
.key {
display: block;
float: left;
z-index: 2;
padding-right: 2px;
}
.value {
display: block;
float: right;
z-index: 2;
padding-left: 2px;
}
}
}
}
-
Ага, спасибо, мне уже как раз такой вариант, с использование псевдоэлемента after пришел в голову.– ims5 ноя 2014 в 14:00
-
Используйте вот такой вариант: jsfiddle.net/L2ya3buj/1 его хитрость в том что не нужно закрашивать background у элементов и можно использовать когда задний фон "неравномерный"– ferrari5 ноя 2014 в 14:13
-
На основе вот этой статьи: DOT LEADERS
Разметка:
<ul class="leaders">
<li>
<span>Однокомнатный стандарт</span>
<span>1.500 руб/сут</span>
</li>
<li>
<span>Однокомнатный</span>
<span>2.000 руб/сут</span>
</li>
<li>
<span>Двухкомнатный стандарт</span>
<span>4.500 руб/сут</span>
</li>
</ul>
Стили:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none
}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:"____________________"
"____________________"
"____________________"
"____________________"
}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white
}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white
}
Итог
Если известно то, что ширины достаточно для того, чтобы вместить строчку целиком, без переносов, то вполне подойдет вариант с табличкой: http://jsfiddle.net/m6v783Ld/
HTML
<div class="row">
<div class="row__term">Such a nice term</div>
<div class="row__dots"></div>
<div class="row__key">1. 01</div>
</div>
CSS
.row {
display: table;
width: 100%;
}
.row__term {
display: table-cell;
width: 1px;
white-space: nowrap;
}
.row__dots {
display: table-cell;
border-bottom: 1px dotted;
}
.row__key {
display: table-cell;
width: 1px;
white-space: nowrap;
}
Есть ещё вот такой вариант на основе этой статьи:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.product-item {
margin-bottom: 5px;
}
.container-stroke {
position: relative;
display: inline-block;
width: 400px;
overflow: hidden;
}
.element {
float: left;
min-width: 50px;
max-width: 310px;
}
.stretch-element {
position: absolute;
overflow: hidden;
}
.table-cell {
display: table-cell;
width: 1%;
}
.line {
height: 14px;
border-bottom: 2px solid #ccc;
}
.price {
display: inline-block;
width: 100px;
}
<div class="product-item">
<div class="container-stroke clearfix">
<div class="element">
Однокомнатный стандарт
</div>
<div class="element">
<div class="stretch-element">
<div class="table-cell">
<div class="line"> </div>
</div>
</div>
</div>
</div>
<div class="price">1.500 руб/сут</div>
</div>
<div class="product-item">
<div class="container-stroke clearfix">
<div class="element">
Однокомнатный
</div>
<div class="element">
<div class="stretch-element">
<div class="table-cell">
<div class="line"> </div>
</div>
</div>
</div>
</div>
<div class="price">2.500 руб/сут</div>
</div>
На jsfiddle
-
Это слишком сложная разметка, если честно, есть вариант ещё проще, сейчас покажу: jsfiddle.net/L2ya3buj/1– ferrari5 ноя 2014 в 14:07
-
@Олег Б, мне не очень нравятся вариант, когда на странице блоки перекрывают друг друга с помощью position:absolute, то есть продолжение точек у вас есть, но его не видно из-за более позиционированного блока. 2. Посмотрите что получится если в правой колонке будет чуть больше текста, цена ведь может быть 900 рублей например или 10000 5 ноя 2014 в 14:20
-
-
Спасибо за ответ, в конце концов использую этот вариант, удобно тем, что не надо задавать цвет бэкграунда на блоках с текстом, чтобы перекрыть точки.– ims6 ноя 2014 в 7:02