Сверстать линии разной длины

Рейтинг: 3Ответов: 3Опубликовано: 05.11.2014

Как можно сверстать эти линии разной длины в списке?

https://i.sstatic.net/Eg1ia.png

css вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 5Принят

Пример тут: ( 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;
            }
        }
    }
}
▲ 3

На основе вот этой статьи: 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
}

Итог

alt text

Ссылка на пример

▲ 3

Если известно то, что ширины достаточно для того, чтобы вместить строчку целиком, без переносов, то вполне подойдет вариант с табличкой: 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;
}