Список в несколько колонок с помощью CSS

Как сделать список в несколько колонок, без использования таблицы.

Использовалось например для вывода красивого списка рубрик в несколько колонок.

Сам список:

  • CSS
  • XHTML
  • Semantics
  • Accessibility
  • Usability
  • Web Standards
  • PHP
  • Typography
  • Grids
  • CSS3
  • HTML5
  • UI

CSS к этому списку:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */

Я думаю разобраться можно :)

Leave a Reply

Your email address will not be published. Required fields are marked *