ナビゲーションの塗りつぶしコンテナの100％

Question

私は自分のページのために微調整した反応的なnavコードを使っています。私はナビゲーションをフル・ワイドに表示し、アクション・ボタンの幅に合わせてコードを表示するようにしています。問題は、ナビゲーションボタンのテキストの長さがすべて異なることですが、他のものと一致するようにdiv全体にまたがってスムーズなボックスデザインを提供したいと考えています。私は本質的にデスクトップビューでこれを見たいと思っています：私はそれをモバイルビューでこのようにスタックしたいと思います。 （モバイルビューでは、私にはうまく見える調整の必要はありません。その下の黒いdivの全幅にまたがるデスクトップが必要です。#navに変更すると、常に下のボタン

JSFiddle

#nav, #nav ul { 
    display:block; 
    list-style: none; 
    margin-left:1%; 
    padding: 0; 
} 

Answer 1

あなたの#navdisplay: flex;とwidth: 100%;を与えることによって、これを達成することができます達成するために使用することができます。その後、text-align: center;

CSS

#nav { 
    display: flex; 
    width: 100%; 
} 

#nav > li { 
    flex-grow: 1; 
    text-align: center; 
} 

JSFiddle

結果

と一緒に #nav > liに flex-grow: 1;を割り当てます

*注#navをメディアクエリにdisplay: block;と指定することを忘れないでください。小さな画面に垂直に重なるようにしてください。

Answer 2

CSSメディアクエリでそれを達成するために、痛みが少なく、次のようになります。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

は、デスクトップビューまたはモバイルビューのときに2つの異なる要素を表示します。その親のアイテムは100％の幅を埋める実現するには、table、trとtdは簡単にそれが