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

Итак, у меня есть панель навигации, и все отлично от того, что я не могу привести ссылки в вертикальный центр.Ссылки в навигационной панели не двигаются вниз?

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

Любая помощь? Благодаря! Вот источник.

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/

источник

2014-04-18 Cwtch22

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

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

А широкий интервал вызывается по краю на вашем ли.

margin-left: 120px;

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

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

http://jsfiddle.net/jtHd9/

источник

2014-04-18 16:57:34 Sam

Ах! Спасибо! Это имеет смысл! :) – Cwtch22

Если вы хотите оставаться рядом с существующим кодом, вы можете просто изменить margin-left на padding-left и перенести его с li на ul. – Sam

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

ответ

Смежные вопросы