Question

所以我有一个导航栏，所有这些都远离我似乎无法将链接带到垂直中心的事实。

此外，链接之间似乎存在巨大差距，我希望降低这一差距。

有任何帮助吗？谢谢！这是所有来源;

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/

Answer 1

您的菜单栏高50像素，因此对于垂直对齐，请尝试添加

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

宽的间距是由你的边缘引起的。

margin-left: 120px;

这会为每个列表项添加边距。将此值移至ul，然后将填充添加到a或li以将项目分隔开来。

我还为导航添加了一个容器。

http://jsfiddle.net/jtHd9/

导航栏中的链接没有向下移动？

1 个答案: