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

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

<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>
HTML
.feature {
	display: block;
	margin: 0;
	padding: 0;
}
.feature li {
	display: block;
	letter-spacing: -1ex;
	margin: 5px 0;
}
.feature-left {
	margin-right: -50%;
	width: 49%;
	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;
}
CSS

Верстка списка характеристик в две колонки с отношением 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>
HTML
.feature {
	display: block;
	margin: 0;
	padding: 0;
}
.feature li {
	display: block;
	letter-spacing: -1ex;
	margin: 5px 0;
}
.feature-left {
	margin-right: -30%;
	width: 69%;
	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;
}
CSS
<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>
HTML
.book_index {
	display: block;
	margin: 0;
	padding: 0;
}
.book_index li {
	display: block;
	letter-spacing: -1ex;
	margin: 5px 0;
}
.book_index-left {
	margin-right: -10%;
	width: 89%;
	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;
}
CSS
23.11.2016, обновлено 17.10.2019
7215
Предыдущая запись Замена кавычек на «ёлочки» PHP
Следующая запись Как отключить тег br

Комментарии 1

Михаил М Михаил М
10 апреля 2021 в 02:35
0
Автор сайта. Дайте, пожалуйста, css и html код оранжевых рамок, которые в примерах.

, чтобы добавить комментарий.

Другие публикации

База городов, регионов и федеральных округов РФ в MySQL
База состоит из трех связанных таблиц, версия от 2016 года.
24643
+6
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
277425
+111
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
84455
+24
Использование API Яндекс Диска на PHP
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
42182
+15
Коды клавиш клавиатуры для JQuery событий keydown, keyup и keypress
Список кодов клавиш стандартной клавиатуры на Windows и MacOS...
40497
-1
Поиск похожих статей на PHP + MySQL
Один из вариантов поиска похожих статей в базе данных основан на схождении слов в двух текстах.
3580
+2