在網格中定位導航文本

Question

我想同樣將我的8個導航鏈接放置在我的導航欄中。

這裏是我的導航HTML：

<nav> 
    <ul class="nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="destinations.html">Destinations</a></li> 
     <li><a href="culture.html">Culture</a></li> 
     <li><a href="attractions.html">Attractions</a></li> 
     <li><a href="history.html">History</a></li> 
     <li><a href="media.html">Media</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="links.html">Links</a></li> 
    </ul> 
</nav> 

我使用的是基本的網格，我試圖在每8個環節的把同樣進入資產淨值的1/8。

我對電網的CSS：

.col-1-8 { 
width:12.5% } 

我申請這個類各8華里，但似乎無法讓他們都同樣居中。

如果有人能幫助我，我會很高興！

感謝

添

Answer 1

您可以使用flex這一點。

.nav { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    /* justify-content: space-between; */ 
 
    
 
    background: yellow; 
 
    
 
    margin: 0; 
 
    padding: 0; 
 
    
 
    list-style: none; 
 
}

<nav> 
 
    <ul class="nav"> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="destinations.html">Destinations</a></li> 
 
     <li><a href="culture.html">Culture</a></li> 
 
     <li><a href="attractions.html">Attractions</a></li> 
 
     <li><a href="history.html">History</a></li> 
 
     <li><a href="media.html">Media</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
     <li><a href="links.html">Links</a></li> 
 
    </ul> 
 
</nav>

Answer 2

此代碼不正是你想要獲得什麼，我認爲你沒有應用盒子縮放邊框，框或文本對齊中心。

http://codepen.io/anon/pen/WQVQGr

HTML：

<nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="destinations.html">Destinations</a></li> 
     <li><a href="culture.html">Culture</a></li> 
     <li><a href="attractions.html">Attractions</a></li> 
     <li><a href="history.html">History</a></li> 
     <li><a href="media.html">Media</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="links.html">Links</a></li> 
    </ul> 
</nav> 

CSS：

*{ 
    box-sizing: border-box; 
} 

nav ul { 
    background-color:yellow; 
    overflow:auto; 
    list-style:none; 
    padding: 0; 
    margin: 0; 
    width: 800px; 
} 

nav ul>li { 
    float:left; 
    width: 12.5%; 
    text-align: center 

}