Links in Navigation Bar not moving down?

StackOverflow https://stackoverflow.com/questions/23158405

  •  05-07-2023
  •  | 
  •  

Domanda

So I have a navigation bar and all is well apart from the fact that I cannot seem to bring the links to a vertical center.

Also there seems to be a huge gap between the links, I wish to lower this gap.

Any help? Thanks! Here's all the source;

HTML and 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>

Here's the site in which this code is on: http://project.mantos.co.vu/share/MCSite/

È stato utile?

Soluzione

Your menu bar is 50px high, so for vertical alignment try adding

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

And the wide spacing is caused by the margin on your li.

margin-left: 120px;

This adds the margin to every list item. Move this value to the ul and then add padding to the a or li to space out the items.

I also added a container for the nav.

http://jsfiddle.net/jtHd9/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top