導航欄居中

Question

請告訴我爲什麼四個導航項不居中。我希望中間兩個導航元素之間的空間與中心標記對齊。

https://jsfiddle.net/yerc52px/

.mainHeader nav { 
    background: #383838; 
    font-size: 1.143em; 
    height: 40px; 
    width: 100vw; 
    line-height: 30px; 
    margin: 0px 0px 0px 0px; 
    padding: 0; 
    text-align: center; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.mainHeader nav ul {margin: 0px 0px 0px 0px;} 

.mainHeader nav ul li {display: inline;} 

.mainHeader nav a:link, .mainHeader nav a:visited { 
    padding: 5px; 
    color: #fff; 
    display: inline-block; 
    height: 30px; 
    width: 18%; 
} 

.mainHeader nav a:hover, .mainHeader nav a:active, 
.mainHeader nav .active a:link, .mainHeader nav .active a:visited { 
    background: #727272; 
    color: #fff; 
    text-shadow: none !important; 
} 

.mainHeader nav li a { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

Answer 1

你.mainHeader nav有100vw的寬度時，你或許應該使用100%。 100vw將不會考慮身體標記應用的邊距，所以它實際上超過了100％，例如100％+ 20px。

https://jsfiddle.net/yerc52px/3/

.mainHeader nav { 
    width: 100%; 

也是你.mainHeader nav ul已經被應用到它的默認填充。使用此功能來解決這個問題：

.mainHeader nav ul { 
    margin: 0px 0px 0px 0px; 
    padding: 0; 
} 

現在固定段落標記...刪除此：

p { 
    margin-left: auto; 
    margin-right: auto; 
    width: 10px; 
} 

，取而代之的是：

p { 
    text-align: center; 
} 

Answer 2

你必須從你的代碼中刪除寬度。編輯本節。

.mainHeader nav a:link, .mainHeader nav a:visited { 
padding: 5px; 
color: #fff; 
display: inline-block; 
height: 30px; 
/* width: 18%; */ 
} 

https://jsfiddle.net/lemonkazi/yerc52px/5/

Answer 3

我將向您介紹來FLEX！

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

覆蓋在下面的語法。

.mainHeader nav ul { 
    display:flex; 
    justify-content:space-between; 
    // or if you want equal spaces between menu options 
    // use justify-content:space-around 
} 

.mainHeader nav a:link, .mainHeader nav a:visited { 
    padding: 5px; 
    color: #fff; 
    display: inline-block; 
    height: 30px; 
    // Removed width 
} 

但bewary，你應該始終把前綴像-webkit-，-moz-，-ms-，等等...但一些瀏覽器不支持像我們最喜愛的IE瀏覽器。

這是你更新的jsfiddle

https://jsfiddle.net/yerc52px/6/