我正在尝试将链接与导航栏隔开，以便它更加分散，而不是隐藏在 Logo 下，但无论我尝试什么都行不通。我在导航栏中间有 Logo ，链接最终在它后面，每次我尝试填充或边距时它根本不起作用。这让我很沮丧，我根本不知道它是什么。请帮我找到解决方案。
HTML: [删除了在 ] 中找到的所有代码
<body>
<header>
<div class="container">
<h1 class="logo">
<a href "#featured" rel="slideto">Wisp</a></h1>
<nav>
<ul class="main-menu">
<li class="About"></li>
<a href="#About" rel="slideto">Services</a>
<li class="Services"></li>
<a href="#Services" rel="slideto">Work</a>
<li class="Work"></li>
<a href="#Work" rel="slideto">About</a>
<li class="Contact"></li>
<a href="#Contact" rel="slideto">Contact</a>
</ul>
</nav>
<div id="motto">
<span class="alignleft">Born To</span>
<span class="Star"></span>
<span class="alignright">D</span>
</div>
</div>
</header>
<div id="featured">
<div class="container">
CSS:
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Istok+Web|Roboto);
body{
background: #8AC9D0;
text-decoration: none;
color: #fff;
font: 'Droid Sans', sans-serif;
}
a{
text-decoration:none;
}
.container {
width: 921px;
margin: 0 auto;
position:relative;
}
header{
width:100%;
height:124px;
background:url('headerbg.png') repeat-x top center;
position:fixed;
top:0; left:0;
z-index:9999;
}
header .logo{
margin: 0;
position: absolute;
top: 0;
left: 50%;
width: 166px; height: 120px;
margin-left:-88px;
display:block;
text-indent:-9999em;
}
header .logo a {
width:166px; height:120px;
display:block;
background:url('logo.png') no-repeat top center;
}
nav{
padding:25px 0 0 0;
}
ul{
list-style-type:none;
margin-right:30px;
}
.main-menu{
width:100%;
height:43px;
background:url('menubg.png') no-repeat top center;
padding:10px 0 0 0;
}
.main-menu a{
float: left;
font-size:16px;
color:#6f6353;
font-family: 'Droid Sans', sans-serif;
text-transform:uppercase;
text-decoration:none;
line-height:34px;
display: block;
text-align:center;
letter-spacing:2px;
padding:0 40px;
overflow:hidden;
}
.main-menu a:hover{
background:#e6e2dc;
}
#motto{
width:390px; height:23px;
background:#fff;
text-align:center;
border:1px solid #98b5b8;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:absolute;
top:107px; left:50%;
margin-left:-199px;
}
#motto span{
font-size:10px;
color:#6f6353;
font-family: 'Roboto', sans-serif;
letter-spacing:4px;
text-transform:uppercase;
padding:4px 0 0 0;
}
#motto span.alignleft{
padding-right:10px;
margin-left:-50px;
}
#motto span.alignright{
padding-left:10px;
margin-right:-63px;
}
#motto span.Star{
width:14px; height:14px;
background:url('slogan-star.jpg') no-repeat top center;
position:absolute;
left:50%;
top:4px;
}
最佳答案
1) 在您的 HTML 中，删除“li”和“ul”元素；他们不必要地使您的 CSS 复杂化。相反，给“导航”元素“主菜单”类。 2) 为每个“a”( anchor )元素添加一个新类，我将在下面解释原因:
<nav class="main-menu">
<a class="main-menu-link" href="#About" rel="slideto">Services</a>
<a class="main-menu-link" href="#Services" rel="slideto">Work</a>
<a class="main-menu-link" href="#Work" rel="slideto">About</a>
<a class="main-menu-link" href="#Contact" rel="slideto">Contact</a>
</nav>
在您的 CSS 中，去掉“ float ”和“显示”。我说要向导航栏内的 anchor 元素添加一个类的原因是因为您有这个:
.main-menu a {
...
}
这意味着“将此样式应用于主菜单导航栏和所有 链接”。这错误地将按钮 CSS 应用于导航栏 CSS。这样做(如下)可能正是您想要的，即仅定位导航栏中的链接:
.main-menu-link {
font-size:16px;
color:#6f6353;
font-family: 'Droid Sans', sans-serif;
text-transform:uppercase;
text-decoration:none;
line-height:34px;
text-align:center;
letter-spacing:2px;
padding:0 40px;
overflow:hidden;
}
现在，当您在“填充”中增加 40 像素时，您会注意到按钮导航栏按钮水平“增长”且文本居中；当您增加“主菜单”下的填充时，您将获得相同的效果，除了按钮居中并且导航栏围绕它们生长。
如果你试图“隔开”按钮，你应该使用“margin”，而不是“padding”，并将它应用到“main-menu-link”(上图)；这会将按钮彼此隔开。这篇文章可能有用:
When to use margin vs padding in CSS
另请注意，“nav”元素得到了相当广泛的支持，但它在 IE9 下的 IE 版本中不起作用。在这种情况下，一个常规的“div”可能就足够了。
我希望至少能帮上忙 :)
关于html - 填充不适用于我的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22278543/