ボディ内のナビゲーションバーがパーセンテージで均等に広がっていませんか？

Question

私はナビバーを作成しており、3つのタブ（例えば、家、約、連絡先）を持っています。私は左に各タブの&の右側に15％を持ってほしい。これはページの合計90％になりますが、3番目のタブは別の行の下に表示されるようです。

デフォルトのマージンがどこかにないか、間違っていますか？ 私は複数のデバイスに合うようにできるだけパーセンテージに固執したいと思います。

私は体の中にnavを配置しました。以下のCSSをご覧ください：

body { 
background-color: pink; 
} 

h1 { 
text-align: center; 
margin-bottom: 4.5%; 
color: #fff; 
font-family: Florence, cursive; 
text-shadow: 2px 0 black; 
} 

nav ul { 
list-style: none; 
} 

nav li { 
display: inline-block; 
margin-left: 15%; 
margin-right: 15%; 
} 

Answer 1

デフォルトでは、要素はwidth: autoです。 case of inline-blocksでは、これはコンテンツの幅になります（利用可能な幅を超えていない場合）。

要素が空でない限り、合計が100％を超えてしまい、次の行に折り返すのが妥当です。あなたは何をすべき

div { 
 
    display: inline-block; 
 
    margin-left: 15%; 
 
    margin-right: 15%; 
 
}

<div>a</div><div>b</div><div>c</div> 
 
<hr /> 
 
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

width、またはmax-widthを指定しています。マージンの合計が90％なので、残りの10％をダイビングするのはwidth: calc(10%/3)です。

div { 
 
    display: inline-block; 
 
    margin-left: 15%; 
 
    margin-right: 15%; 
 
    width: calc(10%/3); 
 
}

<div>a</div><div>b</div><div>c</div> 
 
<hr /> 
 
<div>aaaaaaaaaaa</div><div>bbbbbbbbbbbb</div><div>ccccccccccc</div>

は、別の方法として How to remove the space between inline-block elements?

Answer 2

を参照して、いくつかの余分なスペースがあるかもしれませんので注意してくださいすべての余白や幅を削除し、ちょうどこの

nav ul { 
    display: flex; 
} 

を追加しよう

これにより、nav ulのアイテムがページ全体に均等に配布されます。