Почти каждый день я сталкиваюсь с вёрсткой. Обычно своими решениями не делюсь, ибо лень, но тут что-то решился. Встала передо мной задача сделать подобную вещь:


Содержание


Условия — блочно и семантично. Смотрим решение:


Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <title>Содержание</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  ol {
  list-style: none; /* Убираем цифры в ol */
  overflow: hidden; /* Предотвращаем схлапывание li */
  margin: 10px; /* Отступы от краев родителя */
  }
  li {
  border-bottom: 1px dotted #ccc; /* Устанавливаем линию идущую от названия до цифры */
  float: right; /* Предотвращаем схлопывание блоков */
  width: 100%; /* Растягиванием на всю ширину */
  }
  .name {
  float: left; /* Выравниванием по левому краю */
  background: #fff; /* Прячем бордер цветом фона */
  position: relative; /* Относительно позиционируем, чтобы опустить до бордера */
  bottom: -2px; /* Опускам текст на уровень бордера */
  padding-right: 5px; /* Предотвращаем соприкосновение бордера и текста */
  }
  .quantity {
  float: right; /* Выравниванием по правому краю */
  background: #fff; /* Прячем бордер цветом фона */
  position: relative; /* Относительно позиционируем, чтобы опустить до бордера */
  bottom: -3px; /* Опускам текст на уровень бордера */
  padding-left: 5px; /* Предотвращаем соприкосновение бордера и текста */
  }
  </style>
  </head>
  <body>
  <ol>
  <li>
  <div class="name"><a href="#">SEO & Оптимизация</a></div>
  <div class="quantity">2</div>
  </li>
  <li>
  <div class="name"><a href="#">Деньги & заработок</a></div>
  <div class="quantity">9</div>
  </li>
  <li>
  <div class="name"><a href="#">Мои проекты</a></div>
  <div class="quantity">24</div>
  </li>
  <li>
  <div class="name"><a href="#">Все о uCoz</a></div>
  <div class="quantity">21</div>
  </li>
  </ol>
  </body>
</html>

Подходит только для однородного фона, для неоднородного решение не придумывал, ибо не было нужно.