ナビゲーションオプションを2行に均等に分割するにはどうすればよいですか？ここ

Question

は私の主なNAVコードです：

<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で記述するにはどうすればよいですか？ <li>の外側に<span>を置いてはいけないと私は理解しています。

Answer 1

あなたはその

NOTEため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に設定して並べて表示するようにします。ビューポートが狭すぎると、メディアクエリを使用してnavを使用できるようになりますhttps://jsfiddle.net/IA7medd/g22fgr5k/

：それは3つしか

最初の行に、2行目に2つ

デモであろうように、Liに対する31.33パーセント：このような二行：前CSSの

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

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

I幅を与え