導航欄位於標題頂部

我有以下CSS代碼，我的問題是我的導航欄位於我的標題欄頂部。我怎樣才能將導航欄從標題直接向下移動？導航欄位於標題頂部

header {                     
    background: black;                 
    height: 60px;                  
    left: 0;                    
    margin: 0;                   
    padding: 0;                   
    position: absolute;                 
    width: 100%;                   
}                      

header img {                    
    float: left;                   
    margin-right: 10px;                 
    position: relative;                 
}                      

header h1 {                    
    color: white;                  
    font: 26px Helvetica, Arial, sans-serif;            
    line-height: 60px;                 
    margin: 0;                   
    vertical-align: middle;                
}                      

nav {                     
    background: black;                 
    margin: 0;                   
    padding: 0;                   
    position: absolute;                 
    width: 100%;                   
}

來源

2011-08-26 H.A

請注意，我重新格式化你的代碼爲你，下次在編輯器中使用代碼選項以更好地顯示代碼。 –

請添加您的HTML，只是您的CSS是不夠的。 –

@ H.A;你給position absolute你的header區塊& nav區塊。所以，當你給position absolute一個元素，則該元素移除的正常流動

CSS：

nav { 
top:60px; 
padding: 0; 
position: absolute; 
width: 100%; 
}

來源

2011-08-26 13:22:19 sandeep

給導航欄邊距與導航欄高度相同。

nav { 
background: black; 
margin: 0; 
margin-top:60px; 
padding: 0; 
position: absolute; 
width: 100%; 
}

來源

2011-08-26 13:18:31 corymathews

<!DOCTYPE html> 
<html > 
    <head> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style> 
.navbar-fixed-top{ 

position:static; 

} 
</style> 
    </head> 

    <body> 
<div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h1>HOST</h1> 
        <h3>two is better than one</h3> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> 
         </li> 
         <li> 
          <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> 
         </li> 
         <li> 
          <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
</div> 


    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> 
     <div class="container topnav"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand topnav" href="/">Host</a> 
      </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#">Login</a> 
       </li> 
       <li> 
        <a href="#">Sign up</a> 
       </li> 
      </ul> 

      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 


    </body> 
</html>

來源

2015-07-12 07:51:45

我想這就是你要找的。只需複製html文檔中的整個代碼並在瀏覽器中運行即可。謝謝 –

導航欄位於標題頂部

回答

相關問題