горизонтальный список ul
Основной стиль
.horizontal-li{ clear:both; margin-left: auto; margin-right: auto; overflow: hidden; } .horizontal-li ul { float:left; left:50%; list-style-type:none; margin:0 auto; padding:0; position:relative; } .horizontal-li li { float:left; position:relative; right:50%; }
И плюшки наподобие этой:
.menu3{ margin-top: 10px; margin-bottom: 10px; width: 500px; background-color: #06c; } .menu3 li{ padding: 0 0 0 10px; margin: 20px 0 20px 10px; border-left: 1px solid white; } .menu3 li.first{ padding: 0 0 0 0; margin: 20px 0 20px 0; border-left: none; } .menu3 a{ text-decoration: none; color: #fff; }
пример
CSS:
body{ margin:0; padding:0; } /* main style */ .horizontal-li{ clear:both; margin-left: auto; margin-right: auto; overflow: hidden; } .horizontal-li ul { float:left; left:50%; list-style-type:none; margin:0 auto; padding:0; position:relative; } .horizontal-li li { float:left; position:relative; right:50%; } /* example 1 */ .menu{ margin-top: 10px; margin-bottom: 10px; width: 100%; background-color: #06c; } .menu li{ padding: 3px 0 15px 5px; margin: 2px 0 2px 5px; border-left: 1px solid white; } .menu li:first-child{ padding: 3px 0 15px 0; margin: 2px 0 2px 0; border-left: none; } .menu a{ text-decoration: none; color: #fff; } /* example 2 */ .menu2{ margin-top: 0; margin-bottom: 10px; width: 100%; background-color: yellow; } .menu2 li{ padding: 0 0 0 20px; } .menu2 li:first-child{ padding: 0; } .menu2 a{ color: #000; } /* example 3 */ .menu3{ margin-top: 10px; margin-bottom: 10px; width: 500px; background-color: #06c; } .menu3 li{ padding: 0 0 0 10px; margin: 20px 0 20px 10px; border-left: 1px solid white; } .menu3 li.first{ padding: 0 0 0 0; margin: 20px 0 20px 0; border-left: none; } .menu3 a{ text-decoration: none; color: #fff; }
HTML:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="menu horizontal-li"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Новости</a> </li> <li> <a href="#">Контактная информация</a> </li> <li> <a href="#">О проекте</a> </li> </ul> </div> <span> some text </span> <div class="menu2 horizontal-li"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Новости</a> </li> <li> <a href="#">Контактная информация</a> </li> <li> <a href="#">О проекте</a> </li> </ul> </div> <span> some text </span> <div class="menu3 horizontal-li"> <ul> <li class="first"> <a href="#">Главная</a> </li> <li> <a href="#">Новости</a> </li> <li> <a href="#">Контактная информация</a> </li> <li> <a href="#">О проекте</a> </li> </ul> </div> </body> </html>