固定的导航栏不起作用

Question

我的导航栏有问题。 现在看起来不错，但是如果我将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/

Answer 1

试试这个演示

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

Answer 2

您还可以使用CSS规则：

位置：固定 和top：0px;

在菜单标签上

Answer 3

您必须在＃ 标签上给#nav固定，宽度为％。 如果空间太小，它们将在其父对象的宽度内进行调整大小，将转到新的一行，因此将它们总计为97％，并为边距和填充留出3％ 。 您可以使用Line-height来设置高度和text-aling-center，而不用填充来放置文本

添加到ur div之类的东西，例如800 / 960px宽度，消除溢出并查看魔术效果：D只需将其替换为ur CSS：

#nav ul li {
list-style-type: none;
text-align: center;
display: inline-block;
width: 19%;
margin: 0px;
/* padding: 0px 10px 0px 10px; REMOVE THE PADDING*/
border-right: 1px solid #DDD;
vertical-align: middle;
line-height: 50px;  /*THE SAME AS HEIGHT BUT FOR text elements*/
}

Answer 4

尝试删除#nav并将其包含在ul＃nav上，然后添加固定位置

http://jsfiddle.net/LZAhC/

  #nav ul {
  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;
position: fixed;
  }
  #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;
  }

固定的导航栏不起作用

问题描述

4 个解决方案

解决方案1
0 2014-05-20 12:16:45

解决方案2
0 2014-05-20 12:17:52

解决方案3
0 2014-05-20 12:26:51

解决方案4
0 2014-05-20 12:28:36

固定的导航栏不起作用

问题描述

4 个解决方案

解决方案1 0 2014-05-20 12:16:45

解决方案2 0 2014-05-20 12:17:52

解决方案3 0 2014-05-20 12:26:51

解决方案4 0 2014-05-20 12:28:36

解决方案1
0 2014-05-20 12:16:45

解决方案2
0 2014-05-20 12:17:52

解决方案3
0 2014-05-20 12:26:51

解决方案4
0 2014-05-20 12:28:36