Question

我正在尝试将链接从我的导航栏中分开，这样它就会更加分散，而不会隐藏在徽标下面，但无论我尝试什么都行不通。我在导航栏的中间有标识，链接最后在它后面，每次我尝试填充或边距它根本不起作用。令我感到沮丧的是，我无法弄清楚它到底是什么。请帮我找到解决方案。

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;
}

Answer 1

1）在HTML中，删除“li”和“ul”元素;他们不必要地使你的CSS复杂化。相反，将“nav”元素设为“主菜单”类。 2）为每个“a”（锚）元素添加一个新类，我将在下面解释原因：

<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中，摆脱“浮动”和“显示”。我之所以在导航栏中为锚元素添加一个类的原因是因为你有这个：

.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;
}

现在，当您在“填充”中增加40px时，您会注意到按钮导航栏按钮水平“增长”，文本居中;当您在“主菜单”下增加填充时，您将获得相同的效果，除了按钮居中并且导航栏围绕它们生长。

如果你试图“空出”按钮，你应该使用“margin”而不是“padding”，然后将它应用到“main-menu-link”（上图）;这将使按钮相互隔开。这篇文章可能有用：

When to use margin vs padding in CSS

另请注意，“nav”元素得到了广泛的支持，但它在IE9下的IE版本中不起作用。在这种情况下，常规的“div”可能就足够了。

我希望至少有所帮助：）

填充不适用于我的导航栏

1 个答案: