在网格中居中导航文本

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% }

我正在将此 class 应用到 8 里的每一个，但似乎无法使它们全部均等地居中。

如果有人能帮助我，我会很高兴！

谢谢

蒂姆

Answer 1

此代码完全符合您的要求，我认为您没有应用 box-sizing border-box 或 text-align center。

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

}

Answer 2

您可以为此使用 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>

在网格中居中导航文本

centering nav text within a grid

html

css

nav

centering