Wie man drei Kategorien in einer navbar gleichmäßig ausplatziert

Question

Ich muss meine nav Bar zu vier geraden Abschnitten durch 1920px spreizen Ich versuchte Marge-links: 25% und verdoppelt es für jeden li aber es sah nicht richtig aus mich.

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

Verwendung dieses

CSS

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

li 
{ 
display:table-cell; 
} 

Verwendung eigener Medienabfrage in der mobilen Ansicht ID erforderlich zu behandeln.

hoffe, das hilft: D

Answer 2

Flexbox tut dies leicht mit justify-content: space-between

Sie können mehr über die verfügbaren Optionen lesen Sie hier 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

Es ist besser, Verwenden Sie flexbox für dieses Szenario. Es spielt keine Rolle, wie viele Elemente, die Sie haben, schafft Flexbox alles für Sie:

* {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>

Vorschau

Answer 4

Flexbox oder Tabellenanzeigetyp verwendet wird ein einfacherer und besserer Weg, aber wenn Sie erfahren wollen, was in Ihrem Code falsch ist, dann

1) befindet sich schließende Klammer '}' fehlenden

2) Die ul Breite auf 100%.

3) Dann wenden Sie die Margin-left-Eigenschaft an, aber behalten Sie sie weniger, weil 100/25 = 4, es ist nur Margin, wir haben nicht den Platz berechnet, den jeder li nehmen würde, also irgendwo 17% - 18% verteilt li's der Bildschirm ist oben.

4) Entfernen Sie Eigenschaft "position: fixed" auf 'li'