如何將導航中心固定在圖像上方？

此代碼適用於將導航對齊到右側，但當我嘗試居中並給頂部一些邊距時，圖像與導航一起移動。如何解決這個問題？如何將導航中心固定在圖像上方？

<header> 
    <nav> 
     <div class="row"> 
      <ul class="main-nav"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

* { 
    margin: 0; 
    padding: 0; 
}  

.row { 
    max-width: 1140px; 
    margin: 0 auto; 
} 

header { 
    background-image: url(img/01.jpg); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    background-attachment: fixed; 
} 

.main-nav { 
    float: right; 
    list-style: none; 
    margin-top: 60px; 
} 

.main-nav li { 
    display: inline-block; 
    margin-left: 40px; 
}

我想中心main-nav並給邊距：60px而不給背景圖像留有餘量。

來源

2017-05-31 DonFrost

什麼樣的形象添加填充到header頂部而不是頂部保證金？你做了什麼來「集中並給予一定的利潤」？請包括複製當前行爲所需的最少量代碼。看看如何創建[mcve] –

對不起，這是我在這裏的第一篇文章。 – DonFrost

這就是所謂的保證金崩潰 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

如果沒有邊框，填充，內嵌的內容，block_formatting_context創建或間隙塊的上邊距從它的第一子塊的上邊距分開，或沒有邊框，內邊距，內嵌內容，高度，最小高度或最大高度以將塊的邊緣底部與其最後一個子塊的邊緣底部分開，則這些邊距將摺疊。摺疊後的保證金最終在家長之外。

你可以用任何這些方法修復它。在這種情況下，我只想對.main-nav

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.row { 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    background-image: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
    background-attachment: fixed; 
 
    padding-top: 60px; 
 
} 
 

 
.main-nav { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.main-nav li { 
 
    display: inline-block; 
 
    margin-left: 40px; 
 
}

<header> 
 
    <nav> 
 
     <div class="row"> 
 
      <ul class="main-nav"> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">About</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</header>

來源

2017-05-31 23:27:14

它工作。謝謝 ;） – DonFrost

如何將導航中心固定在圖像上方？

回答

相關問題