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

23.11.2016

10464

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

Список с отношением сторон 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>

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%

Верстка списка характеристик в две колонки с отношением 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