Horizontale Navigationsleiste mit Schwimmer: links, keine, richtige Elemente

Ich möchte eine horizontale Navigationsleiste mit 3 Elementen: eine links, eine Mitte und eine rechts. Aber ich kann nicht scheinen, float: zu bekommen, um für mich zu arbeiten. Das beigefügte Bild zeigt, wie die Objekte nicht horizontal ausgerichtet sind. Ich möchte, dass das zentrierte Element wirklich ein Seitentitel ist, kein Link.Horizontale Navigationsleiste mit Schwimmer: links, keine, richtige Elemente

Die , die ich verwendet habe, scheint zumindest das mittlere Element zu zentrieren, aber ohne gibt es keine Symmetrie. Wie kann ich alle 3 Objekte horizontal positionieren?

<ul> 
    <li style="float:left"><a href="#home">Home</a></li> 
    <li style="clear:both;float:none"><a href="#news">News</a></li> 
    <li style="float:right"><a class="active" href="#about">About</a></li> 
</ul>

Quelle

2017-02-07 zerowords

Sie sind nah dran! Sie müssen nur text-align: center; auf dem übergeordneten Element festlegen, um das mittlere Element zu zentrieren, und dann das erste Element links und das letzte Element nach rechts schweben lassen.

ul { 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
li:nth-child(1) { 
 
    float: left; 
 
} 
 

 
li:nth-child(3) { 
 
    float: right; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a class="active" href="#about">About</a></li> 
 
</ul>

Sie auch, sie alle nehmen die gleiche Menge an Speicherplatz und verwenden text-align haben können den Text links/rechts/Mitte zu positionieren.

ul { padding: 0; } 
 
li { 
 
    width: 33.33%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
li:nth-child(1) { 
 
    text-align: left; 
 
} 
 

 
li:nth-child(3) { 
 
    text-align: right; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a class="active" href="#about">About</a></li> 
 
</ul>

Quelle

2017-02-07 02:29:26

Ihre erste Lösung scheint nicht für mich zu funktionieren, wenn ich den Text des zentralen Elements zu etwas wie "Nachrichten des Tages" verlängere. In diesem Fall ist der mittlere Gegenstand gut links von der Mitte. Ihre zweite Lösung verhält sich nicht gut mit den längeren "Nachrichten des Tages", weil das mittlere Element 2 Zeilen benötigt. Ich denke, ich kann mit der Änderung der Prozentsätze spielen, so dass die Mitte etwa 60% und die anderen 20% beträgt. – zerowords

@zerowords sieht es gut für mich aus. http://i.imgur.com/56cWbE4.png Es gibt ein Standard-Padding auf "ul", das ich nicht entfernt habe, so dass das Menü so aussieht, als wäre es nicht in der Mitte? Ich habe meine Antwort aktualisiert, um das zu entfernen. Die zweite Lösung führt dazu, dass eine Verknüpfung in zwei Zeilen erfolgt, wenn die Breite des Elements> 33,3% der Gesamtbreite des Menüs beträgt, aber das ist zu erwarten, und Sie können die Breite so anpassen, dass sie für Sie funktioniert kenne dich nicht alle deine Anwendungsfälle. Wenn Sie weitere Anforderungen wie diese haben, stellen Sie sicher, dass Sie sie in Ihr OP legen, damit wir keine Zeit verschwenden. –

@zerowords btw nichts, was ich mache, erfordert Browser-Präfixe oder hat Browser-Support-Probleme wie die Verwendung von Flexbox. Das einzige, was Sie vielleicht nicht verwenden möchten, ist ': nth-child()', aber es hat großartige Browser-Unterstützung, und wenn Sie das nicht verwenden möchten, können Sie einfach CSS-Klassen verwenden. Ich habe gerade ': nth-child()' für die Demo verwendet, weil es schnell war. –

Versuchen Sie die Anzeige des li Inline

<li style="display:inline">

Quelle

2017-02-07 02:04:47

Keine Zugabe 'display: inline;' gibt mir nur das gleiche Ergebnis, das ich hatte, als ich weggelassen 'klar: both': Die linke und die mittlere Linie nach oben horizontal, aber die Mitte ist nicht zentriert von links nach rechts, und das richtige Element ist immer noch unter den anderen. – zerowords

Flexbox dies einfach tut recht.

Angenommen, Sie Markup:

<ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a class="active" href="#about">About</a></li> 
</ul>

Die CSS ist dann:

ul { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

Erinnern die notwendigen Anbieter Präfixe für Cross-Browser-Kompatibilität hinzuzufügen.

Quelle

2017-02-07 02:09:01 dommmm

Ihre Lösung sieht am einfachsten aus, bis ich Ihren Kommentar zur Cross-Browser-Kompatibilität sehe. Erfordert die Lösung von Michael Coker das Hinzufügen solcher Anbieterpräfixe? Ich kenne Verkäuferpräfixe nicht, daher ist dies ein Problem für mich. – zerowords

Flexbox wird in allen gängigen Browsern unterstützt, hat aber einige Probleme in IE. (http://caniuse.com/#search=flexbox) Wenn Sie über eine umfangreiche Benutzerdatenbank verfügen, die auf Ihre Website unter IE zugreift, würde ich dies nicht empfehlen. ansonsten ist es ziemlich in Ordnung. Hersteller-Präfixe sind im Grunde zusätzliche Regeln, die es neuen Funktionen ermöglichen, in Browsern zu arbeiten, obwohl sie noch nicht vollständig implementiert sind. Wenn Sie sie hinzufügen, wird sichergestellt, dass das CSS auf allen Ihren Browsern gleich funktioniert. Sie können dieses Online-Tool (http: // pleeease.io/play /), um Vendor-Präfixe zu generieren, wenn Sie diese nicht bereits während des Builds hinzufügen. Fügen Sie einfach Ihre CSS auf der linken Seite ein. – dommmm

In dieser Ausgabe sollten Sie this blog, um herauszufinden, wie Sie Element horizontal in richtig zu machen.

In Ihrem Fall gibt es Servals Weg, um es zu erreichen, werde ich sie auf diese Antwort setzen.

ul { 
 
\t padding: 0; 
 
} 
 

 
li { 
 
\t list-style: none; 
 
} 
 

 
.first li { 
 
\t float: left; 
 
\t width: 50px; 
 
} 
 

 
.first .news { 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t margin-left: -50px; 
 
\t margin-right: -50px; 
 
} 
 

 
.first li + li + li { 
 
\t float: right; 
 
} 
 

 
.second li { 
 
\t display: inline-block; 
 
    float: left; 
 
\t width: 33%; 
 
} 
 

 
.second .news { 
 
\t text-align: center; 
 
} 
 

 
.second li + li + li { 
 
\t text-align: right; 
 
    width: 34%; 
 
} 
 

 
.third { 
 
\t position: relative; 
 
} 
 

 
.third li { 
 
\t position: absolute; 
 
} 
 

 
.third .news { 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
.third li + li + li { 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
}

<h4>1.The key is 'margin-left' nagative value to expand space to text center is right.</h4> 
 
<ul class="first"> 
 
    <li>home</li> 
 
    <li class="news">news</li> 
 
    <li>about</li> 
 
</ul> 
 
<br> 
 
<h4>2.The key is make 'li' elements have average width and use text align to achieve it, but there is 1% error, but it's too tiny on sight</h4> 
 
<ul class="second"> 
 
    <li>home</li> 
 
    <li class="news">news</li> 
 
    <li>about</li> 
 
</ul> 
 
<h4>3. This situation is easy to understand.</h4> 
 
<ul class="third"> 
 
    <li>home</li> 
 
    <li class="news">news</li> 
 
    <li>about</li> 
 
</ul>

Quelle

2017-02-07 02:47:20

Ich denke, ich sehe, wie ich Ihren Ansatz anpassen kann, besonders den dritten, weil Sie 'width: 100%' auf den mittleren Punkt verwenden, und das würde wahrscheinlich gut mit meinen breiteren mittleren Elementen funktionieren. Ich bin nervös wegen Ihrer ersten Lösung, weil ich für verschiedene Bildschirme befürchte, dass px Messungen nicht sehr vielseitig sein könnten. – zerowords

@zerowords Ihre Sorge ist richtig, in diesem Fall, ich fokussiere nur mittlere Sekunde, wenn verschiedene Bildschirm und Gerät betrachten, wird es einen anderen Weg, um es zu erreichen. –

Horizontale Navigationsleiste mit Schwimmer: links, keine, richtige Elemente

Antwort

Verwandte Themen