Ссылки в панели навигации не двигаются вниз?

0

Поэтому у меня есть панель навигации, и все отлично от того, что я не могу привести ссылки в вертикальный центр.

Также, похоже, существует огромный разрыв между ссылками, я хочу уменьшить этот пробел.

Любая помощь? Благодарю! Здесь весь источник;

HTML и CSS;

<!DOCTYPE html>
<html>
<head>
<!--LINKING THE STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--DO NOT EDIT THIS STYLE SHEET-->
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background-color: #111;
opacity: 0.6;
border-style: solid;
border-color: #fff;
width: 50em;
height: 50px;
margin-left: auto;
margin-right: auto;
}
li
{
display:inline;
margin-left: 120px;
text-align: center;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Здесь сайт, на котором находится этот код: http://project.mantos.co.vu/share/MCSite/

Теги:
navigation

1 ответ

0
Лучший ответ

Панель меню имеет высоту 50 пикселей, поэтому для вертикального выравнивания попробуйте добавить

.nav a{ line-height:50px; }

И широкий интервал вызван положением на вашем ли.

margin-left: 120px;

Это добавляет маржу к каждому элементу списка. Переместите это значение в ul и затем добавьте отступы в a или li для выделения элементов.

Я также добавил контейнер для навигатора.

http://jsfiddle.net/jtHd9/

  • 0
    Ах! Спасибо! Это имеет смысл!:)
  • 0
    Если вы хотите остаться близко к существующему коду, вы можете просто поменять поле margin-left на padding-left и переместить его из li в ul.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню