使用固定寬度時居中導航欄

我正在嘗試居中導航欄，同時使用固定寬度的大屏幕。基本上我想將藍色區域居中在網格上，而不是從左邊緣離開。同時我需要左右分別左右浮動。使用固定寬度時居中導航欄

HTML

<div class="navbar"> 
<div class="navbar-left"> 
    <a href="#home" class="navbar-brand icon-material-radio-button-on"></a> 
</div> 
<div class="navbar-right"> 
    <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a> 
    <a href="#work" class="navbar-arrow icon-material-arrow-back"></a> 
</div> 
</div>

CSS

.navbar { 
background-color: #f8f8f8; 
position: fixed; 
width: 100%; 
max-width: 1140px; 
z-index: 1; 
font-size: 14px; 
min-height: 64px; 
list-style: none; 
text-align: center; 
float: none; 
} 

.navbar-brand { 
float: left; 
} 

.navbar-arrow { 
float: right; 
}

來源

2015-04-04 user3508797

如果你能刪除的位置是：固定的，那麼你可以嘗試保證金：0汽車; 像這裏

<html> 
    <head> 
     <style> 
.navbar { 
    background-color: #f8f8f8; 
    width: 100%; 
    max-width: 1140px; 
    z-index: 1; 
    font-size: 14px; 
    margin:0 Auto; 
    min-height: 64px; 
    list-style: none; 
    text-align: center; 
    float: none; 
} 

.navbar-brand { 
    float: left; 
} 

.navbar-arrow { 
    float: right; 
} 
     </style> 
    </head> 
    <body> 
     <div class="navbar"> 
      <div class="navbar-left"> 
       <a href="#home" class="navbar-brand icon-material-radio-button-on"></a> 
      </div> 
      <div class="navbar-right"> 
       <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a> 
       <a href="#work" class="navbar-arrow icon-material-arrow-back"></a> 
      </div> 
     </div> 
    </body> 
</html>

來源

2015-04-04 05:25:03 DarkCoderRises

是的，我需要在向下滾動頁面時將導航欄固定在頂部。儘管如此，但導航欄會隨之滾動。 – user3508797 2015-04-04 05:33:08

您也可以嘗試： - .navbar { background-color：＃f8f8f8; 寬度：100％; max-width：1140px; z-index：1; font-size：14px; 保證金：0自動; min-height：64px; list-style：none; text-align：center; float：none; left：0; right：0; 職位：固定; } – DarkCoderRises 2015-04-04 05:45:57

完美，工作。謝謝！ – user3508797 2015-04-04 06:05:16

使用固定寬度時居中導航欄

回答

相關問題