如何在2行中平均中斷我的導航選項？

Question

這是我的主要導航代碼：

 <nav id="nav-primary"> <ul> <span class="nobr"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Help</a> </li> </span> <span class="nobr"> <li> <a href="#" class="active">Events</a> </li> <li> <a href="#">Contact</a> </li> </span> </ul> </nav> 

導航選項並排顯示，並且當視口變得太窄時，這些選項總是分成3行的1行和2行的1行。

如何用有效的HTML編寫此內容？ 我知道我不應該將<span>放在<li>之外。

Answer 1

您必須為此使用media queries

注意 ：選擇更適合您的斷點

---

 * { box-sizing: border-box } body, ul { margin: 0 } ul { font-size: 0; /* fix inline-block gap */ padding: 0; } li { list-style: none; width: 100%; /* 1 column */ display: inline-block; font-size: 16px; /*reset font-size */ background: lightyellow; text-align: center; border: 1px dotted red; margin:3px 0 } @media (max-width: 768px) { li { width: 50%; /* 2 even columns */ background: lightgreen } } @media (max-width: 468px) { li { width:calc( 100% / 3); /* 3 even columns */ background: lightblue } } 

 <nav id="nav-primary"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Help</a> </li> <li> <a href="#" class="active">Events</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> 

Answer 2

您可以使用CSS而不是html來處理它，因此html會像這樣：

<nav id="nav-primary">
  <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Help</a>
      </li>
      <li>
        <a href="#" class="active">Events</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
  </ul>
</nav>

在您的CSS中，您將制作float：left到li，以便它們並排放置，並且當視口變得太窄時，您可以使用媒體查詢，這將給您另外一種樣式，使您的導航變為兩行，如下所示：

li{
  float:left;
  margin-right:10px;
}

@media only screen and (max-width: 481px) {
  li{
    width:31.33%;
    margin-right:2%;
  }
}

在前面的CSS中，我給li的寬度為31.33％，因此第一行中只有3個，第二行中只有兩個

演示： https : //jsfiddle.net/IA7medd/g22fgr5k/