固定導航欄不起作用

我的導航欄出現問題。現在看起來很棒，但是如果我添加一個位置：固定在我的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/

來源

2014-05-20 user3634589

試試這個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; 
}

來源

2014-05-20 12:16:45 Amit

你也可以使用CSS規則：

職位：固定;和top：0px;

在你的菜單標籤

來源

2014-05-20 12:17:52 Khushwant

ü必須給固定與#nav和上一個標籤與％的寬度。他們將在其父母的寬度範圍內調整大小如果空間太小，他們將進入一個新的行，所以總額爲97％，並留下3％的利潤和填充。而不是定位用墊襯的文字ü可以使用LINE-HEIGHT身高和文本阿玲中心

添加到UR DIV somethink像800/960像素寬度去除溢出，看到了魔術：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*/ }

來源

2014-05-20 12:26:51 Boyanov

嘗試刪除#nav和iclude它UL＃資產淨值，並添加位置固定

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

來源

2014-05-20 12:28:36

固定導航欄不起作用

回答

相關問題