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 li中的每一个，但似乎无法将它们全部集中在一起。

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

感谢

添

Answer 1

此代码完全符合您的要求，我认为您没有应用框大小的边框或文本对齐中心。

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。

＆＃13;

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

＆＃13;

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

＆＃13;

将网格中的导航文本居中

2 个答案: