Nav-Bar im Körper nicht gleichmäßig verteilt mit Prozent?

-1

Ich erstelle eine Navigationsleiste und habe 3 Registerkarten (z. B. zu Hause, über, Kontakt) Ich möchte gleichmäßig verteilen. Ich möchte links & rechten Seite jeder Registerkarte, um 15% zu haben. Dies sollte insgesamt 90% der Seite ergeben, aber die dritte Registerkarte scheint unten in einer separaten Zeile zu erscheinen.Nav-Bar im Körper nicht gleichmäßig verteilt mit Prozent?

Fehle ich irgendwo einen Standardrand oder was mache ich falsch? Ich möchte so viele Prozent wie möglich an die verschiedenen Geräte anpassen.

Ich habe das Nav innerhalb des Körpers gefunden. Siehe unten stehendes 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%; 
}

Quelle

2016-10-25 Sarah

Was ist ihre "Breite"? Sind sie leer? – Oriol

Entschuldigung, ich bin derzeit ein Anfänger. Ich habe keine Breite zugewiesen, so weit ich weiß, können Sie keine Breite zuweisen, die inline angezeigt wird. Hat jedes Element dieselbe Standardbreite? – Sarah

Inline-Elemente ignorieren 'width', aber Inline-Blöcke respektieren es. Wenn Sie keine Breite festlegen, entspricht die Breite der Breite des Inhalts. Solange die Elemente nicht leer sind, können sie 100% überschreiten und in die nächste Zeile umbrechen. – Oriol

Standardmäßig haben Elemente width: auto. In case of inline-blocks ist dies die Breite des Inhalts (es sei denn, diese ist größer als die verfügbare Breite).

Also, wenn Ihre Elemente leer sind, ist es sinnvoll, dass sie am Ende mehr als 100% summieren und damit in die nächste Zeile springen.

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>

Was sollten Sie tun, ist ein width oder ein max-width angeben. Da die Gewinnspanne allein 90% beträgt, wäre das Tauchen der restlichen 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>

Beachten Sie, könnte es einige zusätzliche Leerzeichen sein, siehe How to remove the space between inline-block elements?

Quelle

2016-10-25 21:53:26 Oriol

Als Alternative entfernen Sie alle Ränder und Breiten und nur versuchen, diese

nav ul { 
    display: flex; 
}

hinzufügen

Dadurch werden die nav ul Objekte gleichmäßig auf der Seite verteilt.

Quelle

2016-10-25 22:03:18 Johannes

Nav-Bar im Körper nicht gleichmäßig verteilt mit Prozent?

Antwort

Verwandte Themen