3

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

http://i.imgur.com/txIt9Tu.png?1

4 ответа 4

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
  • Ага, спасибо, мне уже как раз такой вариант, с использование псевдоэлемента after пришел в голову.
    – ims
    5 ноя 2014 в 14:00
  • Используйте вот такой вариант: jsfiddle.net/L2ya3buj/1 его хитрость в том что не нужно закрашивать background у элементов и можно использовать когда задний фон "неравномерный"
    – ferrari
    5 ноя 2014 в 14:13
  • Да, спасибо большое, его и использую.
    – ims
    6 ноя 2014 в 7:03
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;
}
-1

Есть ещё вот такой вариант на основе этой статьи:

.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">&nbsp;</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">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
  <div class="price">2.500 руб/сут</div>
</div>

На jsfiddle

4
  • Это слишком сложная разметка, если честно, есть вариант ещё проще, сейчас покажу: jsfiddle.net/L2ya3buj/1
    – ferrari
    5 ноя 2014 в 14:07
  • @Олег Б, мне не очень нравятся вариант, когда на странице блоки перекрывают друг друга с помощью position:absolute, то есть продолжение точек у вас есть, но его не видно из-за более позиционированного блока. 2. Посмотрите что получится если в правой колонке будет чуть больше текста, цена ведь может быть 900 рублей например или 10000
    – MasterAlex
    5 ноя 2014 в 14:20
  • Обновил без абсолютного позиционирования.
    – ferrari
    5 ноя 2014 в 14:27
  • Спасибо за ответ, в конце концов использую этот вариант, удобно тем, что не надо задавать цвет бэкграунда на блоках с текстом, чтобы перекрыть точки.
    – ims
    6 ноя 2014 в 7:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.