Меню в виде книжного оглавления на CSS

Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).

Меню на подобие книжного оглавления удобно, если вам требуется разнести по разным сторонам название раздела и, например, количество подразделов (на сайтах недвижимости эту может быть тип недвижимости и число объектов, в блогах - название раздела и количество тем в нем).

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

HTML-код приведенного меню:


<ul id="list">
<li><span>11</span> <a href="#">CSS</a><br /></li>
<li><span>20</span> <a href="#">HTML</a><br /></li>
<li><span>35</span> <a href="#">jQuery</a><br /></li>
<li><span>62</span> <a href="#">JavaScript</a><br /></li>
</ul>

CSS-стили для меню:


ul#list {list-style:none;width:320px;}
#list li {background:url(botline.gif) repeat-x 0 0.85em;}
#list li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#list li span {float:right;background:#FFF; padding 0 0 0 4px;}
#list li br {clear:both;}

Где botline.gif собственно нижнее подчеркивание.

Спасибо за добавление статьи в: