ナビバーに3つのカテゴリを均等に配置する方法

Question

1920pxまで4つの偶数セクションにナビゲーションバーを配置する必要があります 私はtry'd margin-leftを25％とし、すべてのliに対して2倍にしました。私。

li{ 
float:left; 
} 

a{ 
color:#111; 

ul{ 
position:fixed; 
} 

li a{ 
display: block; 
padding: 14px 16px; 
text-decoration: none; 
position:relative; 
position:fixed; 
} 

li a:hover{ 
background-color: #111; 
color: white; 
} 




<ul> 
<li><a>Home</a></li> 
<li><a>Sign Up</a></li> 
<li><a>Forum</a></li> 
<li><a>Gallery</a></li> 
</ul> 

Answer 1

使用この

CSS

ul 
{ 
display:table; 
width:100%; 
} 

li 
{ 
display:table-cell; 
} 

必要なモバイルビューidに処理するために別々のメディアクエリを使用します。

ホープ、このことができます：D

Answer 2

フレキシボックスを、これは簡単にjustify-content: space-between

であなたがここにhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding: 0; 
 
    position: fixed; 
 
    left: 0; right: 0; 
 
} 
 

 
a { 
 
color:#111; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
li a { 
 
display: block; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover{ 
 
background-color: #111; 
 
color: white; 
 
}

<ul> 
 
<li><a>Home</a></li> 
 
<li><a>Sign Up</a></li> 
 
<li><a>Forum</a></li> 
 
<li><a>Gallery</a></li> 
 
</ul>

Answer 3

を使用可能なオプションの詳細を読むことができないそれはに優れていますこのシナリオではflexboxを使用してください。それはあなたが持っているどのように多くの要素は関係ありません、フレキシボックスはあなたのためにすべてを管理します。

* {margin: 0; padding: 0; list-style: none;} 
 
a {text-decoration: none; display: block; padding: 5px; border: 1px solid #ccc; color: #000; border-radius: 3px; margin: 3px;} 
 
ul {display: flex;} 
 
ul li {flex-grow: 1; flex-basis: 0;}

<h2>With 4 Columns</h2> 
 
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Sign Up</a></li> 
 
    <li><a href="#">Forum</a></li> 
 
    <li><a href="#">Gallery</a></li> 
 
</ul> 
 
<h2>With 3 Columns</h2> 
 
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Sign Up</a></li> 
 
    <li><a href="#">Forum</a></li> 
 
</ul> 
 
<h2>With 5 Columns</h2> 
 
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Sign Up</a></li> 
 
    <li><a href="#">Forum</a></li> 
 
    <li><a href="#">Gallery</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

プレビューフレキシボックスや表の表示タイプを使用して

Answer 4

がありますより簡単でより良い方法ですが、あなたのコードで何が間違っているかを知りたい場合は、

1）閉じ括弧 '}'がありません

2）ul幅を100％に設定してください。

3）100/25 = 4、それはちょうどマージンなので、margin-leftプロパティを適用しますが、それを少なくします。各liが取るスペースを計算していないので、17％〜18％画面の上部。

4）プロパティ "の位置：固定" を削除し、ちょうどあなたが知っているように '李'