Question

我的导航栏出现问题。它现在看起来很棒，但是如果我添加一个位置：固定在我的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

试试这个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;
}

Answer 2

你也可以使用css规则：

位置是：固定;和顶部：0px;

菜单标签上的

Answer 3

你必须在＃标签上标注#nav和％的宽度。如果空间太小，它们将在的父级宽度中调整大小，它们将转到新行，因此将它们总计为97％，并为边距和填充留下3％。而不是使用填充定位文本你可以使用行高和文本中心

添加到你的div div思考 800 / 960px宽度删除溢出并看到魔法：D 只需在你的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 个答案: