我的导航栏有问题。它现在看起来很棒，但是如果我添加一个 position:fixed 到我的 css，它会把一切都搞砸。另外，如果栏不能水平放置在屏幕上，浏览器会将它分成两行，所以它适合，但我不想这样! 我只添加了一个 bg 高度，这样我就可以滚动并查看导航栏是否保留。 我想要的是在屏幕上方有一个固定的导航栏，不与以后的内容重叠，并且横向填满屏幕。 这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700|Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!-- A roboto font stylesheetje a google fontsban -->
</head>
<body>
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li><a href="#top">HOME</a></li>
<li><a href="#divider">FEATURE SET</a></li>
<li><a href="#divider4">WHO ARE WE</a></li>
<li><a href="#divider5">INDIEGOGO</a></li>
<li><a href="#href">CONTACT US</a></li>
</ul>
</div>
CSS:
@charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
在这里您可以看到它正在运行:http://jsfiddle.net/DzLvT/
最佳答案
试试这个 demo
<div id="nav">
<ul>
<li><a href="#top">HOME</a></li>
<li><a href="#divider">FEATURE SET</a></li>
<li><a href="#divider4">WHO ARE WE</a></li>
<li><a href="#divider5">INDIEGOGO</a></li>
<li><a href="#href">CONTACT US</a></li>
</ul>
</div>
#nav{
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
bottom:auto;
background-color: #353539;
height:50px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
vertical-align: middle;
line-height:50px;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body{
background-color:#c5c5c5;
height:1500px;
}
关于html - 固定导航栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23759274/