Как сделать точки как в содержании?

Question

[a16a]

Всем привет.

Как сделать точки как в книге? Например
Текст...........................................текст. (От одного края до второго края блока)
Чтобы между ними создавалась столько точек сколько понадобиться, и чтобы была адаптивным. Например при меньшим размере экрана, не переносилась а сокращалась кол-во точек.?

Comments

[Сергей delphinpro]

Да поискать-то попробуй...

Answer 1

[a16a]

HTML

<ul class="leaders">
	<li><span>Item</span><span>12.234</span></li>
	<li><span>Another Item</span><span>1,000.25</span></li>
</ul>

CSS

ul.leaders li { clear: both; }

ul.leaders li span:first-child {
	float: left;
	padding: 0 .4em 0 0;
	margin: 0;
}
ul.leaders li span + span {
	float: right;
	padding: 0 0 0 .4em;
	margin: 0;
}

ul.leaders li:after {
	content: "";
	display: block;
	overflow: hidden;
	height: 1em;
	border-bottom: 1px dotted;
}

Comments

[Сергей delphinpro]

Ну вот, стоило чуток поискать, и всё нашлось...

Answer 2

[Андрей Куклин]

Можно сделать background, можно border-bottom на твой выбор