HTML и CSS списки по горизонтали

CSS атрибуты и значения, определяющие свойства списков

В этом уроке мы познакомимся с горизонтальными списками.

HTML списки | Пример:

Sony
Asus
Dell
Toshiba
Acer
Lenovo

CSS списки | Пример ниже:

<title>Пример горизонтального CSS списка</title>

          <style type="text/css">

          * {font-family: Arial, Helvetica, sans-serif}

          #nav_menu {padding: 0; width: 762px; margin: 0 auto}

          #nav_menu ul {list-style: none; margin: 0; padding: 0}

          #nav_menu li {display: inline}

          #nav_menu a {

          float: left;

          width: 125px;

          height: 30px;

          background-color: #cc0033;

          border-left: 2px solid #ffffff;

          text-decoration: none;

          text-align: center;

          padding: 0;

          padding-top: 10px;

          font-size: 18px;

          color: #ffffff

          }

          #nav_menu a:hover {background-color: #990033; color: Tomato}

          </style>
 </head>

          <body>

          <div id="nav_menu">

          <ul>

          <li><a href="#">Sony</a></li>

          <li><a href="#">Asus</a></li>

          <li><a href="#">Dell</a></li>

          <li><a href="#">Toshiba</a></li>

          <li><a href="#">Acer</a></li>

          <li><a href="#">Lenovo</a></li>

          </ul>

          </div>

Результат: CSS списки ⇒ горизонтальное меню

Атрибуты и значения

Селектор * – определяет все элементы документа. В данном случае установлен шрифт.
padding:0 – отменяет внутренние поля.
margin:0 auto – определяет центрирование блока.
list-style:none – определяет отсутствие маркеров списка.
margin:0 – отменяет внешние поля блока
display:inline – определяет горизонтальное положение объектов.
border-left: – определяет свойства левой границы.
padding-top: – определяет размер верхнего внутреннего поля.
text-decoration:none – отменяет подчеркивание текста.
float:left – определяет обтекание слева (подробнее в одном из следующих уроков).
a:link, a:active, a:visited заменены селектором a, то есть все три псевдоэлемента имеют одинаковые свойства.

Ширина блока подсчитана так: 762 = 125 * 6 + 2 * 6, где 125 * 6 → длина 6-ти ссылок, 2 * 6 → общая ширина атрибута border-left.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS таблицы CSS списки по горизонтали CSS списки и изображения