HTML/CSS

Верстка списка с отточием

Иногда возникает необходимость сверстать список характеристик товара в две колонки или содержание статьи. Чтобы улучшить восприятие текста такие списки разделяют линиями или многоточием, в данной статье представлены примеры как их сделать.

1

Список с отношением сторон 50/50%

<ul class="feature">
    <li>
        <div class="feature-left">Габариты(ШхГхВ)</div>
        <div class="feature-right">28х28х47 см</div>
    </li>
    <li>
        <div class="feature-left">Размер</div>
        <div class="feature-right">XS - 42 размер<br>S - 44 размер</div>
    </li>
    <li>
        <div class="feature-left">Цвет</div>
        <div class="feature-right">Желтый</div>
    </li>
</ul>
.feature li {
    display: block;
    letter-spacing: -1ex;
    margin: 5px 0;
}
.feature-left {
    margin-right: -50%;
    width: 50%;
    vertical-align: top;
    overflow: hidden;
    display: inline-block;
    letter-spacing: normal;
}
.feature-left:after {
    content: '';
    display: inline-block;
    width: 100%;
    margin: 0 -99% 0 3px;
    vertical-align: baseline;
    border-bottom: 1px dashed #888;    
}
.feature-right {
    display: inline-block;
    letter-spacing: normal;
    padding-left: 3px;
    margin-left: 50%;
    width: 50%;
    vertical-align: bottom;
}
2

Список с отношением сторон 70/30%

Верстка списка характеристик в две колонки с отношением 70/30% с пунктирной линией.

<ul class="feature">
    <li>
        <div class="feature-left">Габариты(ШхГхВ)</div>
        <div class="feature-right">28х28х47 см</div>
    </li>
    <li>
        <div class="feature-left">Размер</div>
        <div class="feature-right">XS - 42 размер<br>S - 44 размер</div>
    </li>
    <li>
        <div class="feature-left">Цвет</div>
        <div class="feature-right">Желтый</div>
    </li>
</ul>
.feature li {
    display: block;
    letter-spacing: -1ex;
    margin: 5px 0;
}
.feature-left {
    margin-right: -30%;
    width: 70%;
    vertical-align: top;
    overflow: hidden;
    display: inline-block;
    letter-spacing: normal;
}
.feature-left:after {
    content: '';
    display: inline-block;
    width: 100%;
    margin: 0 -99% 0 3px;
    vertical-align: baseline;
    border-bottom: 1px dashed #888;
}
.feature-right {
    display: inline-block;
    letter-spacing: normal;
    padding-left: 3px;
    margin-left: 30%;
    width: 30%;
    vertical-align: bottom;
}
3

Содержание статьи или книги

<ul class="book_index">
    <li>
        <div class="book_index-left">1.ОБЗОР ПРОГРАММ ДЛЯ ВЕРСТКИ И ДИЗАЙНА</div>
        <div class="book_index-right">11</div>
    </li>
    <li>
        <div class="book_index-left">1.2. ВЕКТОРНЫЙ ГРАФИЧЕСКИЙ РЕДАКТОР ADOBE</div>
        <div class="book_index-right">14</div>
    </li>
    <li>
        <div class="book_index-left">1.3. ПРОГРАММА ВЕРСТКИ ADOBE INDESIGN</div>
        <div class="book_index-right">17</div>
    </li>
    <li>
        <div class="book_index-left">1.4. ПРОГРАММА ДЛЯ СОЗДАНИЯ PDF-ФАЙЛОВ ACROBAT</div>
        <div class="book_index-right">19</div>
    </li>
    <li>
        <div class="book_index-left">1.5. РАСТРОВЫЙ РЕДАКТОР ADOBE PHOTOSHOP</div>
        <div class="book_index-right">123</div>
    </li>
</ul>
.book_index li {
    display: block;
    letter-spacing: -1ex;
    margin: 5px 0;
}
.book_index-left {
    margin-right: -10%;
    width: 90%;
    vertical-align: top;
    overflow: hidden;
    display: inline-block;
    letter-spacing: normal;
}
.book_index-left:after {
    content: '';
    display: inline-block;
    width: 99%;
    margin: 0 -99% 0 3px;
    vertical-align: baseline;
    border-bottom: 1px dotted #000;
}
.book_index-right {
    display: inline-block;
    letter-spacing: normal;
    padding-left: 3px;
    margin-left: 10%;
    width: 10%;
    vertical-align: bottom;
}
23 ноября 2016
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.