Question

我正在尝试复制http://csswizardry.com/demos/centred-nav/但是将菜单放在屏幕顶部。我已经回顾了一些关于w3schools和其他一些教程的教程，但仍然无法弄清楚为什么它不会从头开始。下面是我的style.css

body    { 
width:960px; 
top:0px;

padding:10px 0; 
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}

下面是index.html

<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>  
<div id="container">
    <div id="topnav">
        <ul id="nav">
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Portfolio</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>
</div>  
</body>
</html>

任何人都能看到我做错了什么？

Answer 1

更改

#nav a {
    display:inline-block;
    padding: 102px;
}

到

#nav a {
    display:inline-block;
    padding: 0 102px 0 0;
}

并且可能还要添加以删除最终子元素的右侧边距

#nav a:last-child {
    padding:0;
}

您在a标签周围应用102px填充，只需要在右侧：）

Answer 2

body    { 
width:960px; 
top:0px;

/*############  change padding from 10px to 0px  ##########*/

padding:0px 0; 
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}

#nav a{}

有更多填充

HTML / CSS Navbar格式问题

2 个答案: