CSS горизонтальные списки

• HTML
• XML
• CSS
• XSLT

Горизонтальные списки полезны, например, при создании меню, списка ссылок и т.п. Лично я для создания меню традиционно использую таблицы (table), но это может быть не совсем правильно. Т.к. список -- это всё-таки структурированные данные, и для поисковой машины должен выглядеть в более выгодном свете. Это просто мои догадки, и возможно не совсем верные ;).

Итак, создадим структуру списка.

HTML: Неупорядоченный список (ul)

<ul class="listMenu">
  <li><a href="http://dotrb.blogspot.com/search/label/HTML">HTML</a></li>
  <li><a href="http://dotrb.blogspot.com/search/label/XML">XML</a></li>
  <li><a href="http://dotrb.blogspot.com/search/label/CSS">CSS</a></li>
  <li><a href="http://dotrb.blogspot.com/search/label/XSLT">XSLT</a></li>
</ul>

Создаём стили CSS для списка. Если задаёте стили в теле сообщения, заключайте их между тегами <style> и </style>.

CSS: Стили для списка

.listMenu {
  margin:0; padding:0;
  list-style-type:none;
}
.listMenu li {
  display:inline;
}

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

CSS: Горизонтальное меню - список

.listMenu {
  margin:0; padding:0;
  list-style-type:none;
  float:right;
}
.listMenu li {
  font-family: Georgia, Times, serif;
  display:inline;
  padding:0px 4px;
}
.listMenu li a {
  color:#000;
  text-decoration:none;
}
.listMenu li a:hover {
  color:#000;
  text-decoration:none;
  border-bottom:3px solid #C61A1A;
}

На этом краткий экскурс по спискам закончен :)