Ich mag meine Untermenü über die gesamte Breite der Browser-Fenster wie das Bild unten spannen:Wie wird die volle Breite des Browserfensters im Untermenü angezeigt?
ich Bootstrap verwende, mein Hauptmenü auch nach rechts schwimmt.
Ich habe eine Demo erstellt, was ich bisher gemacht habe. Wie erreiche ich dieses Ergebnis?
http://codepen.io/ifusion/pen/oLVVXj
Zu allererst Bootstrap macht Sie wirklich unflexibel. Also, wenn Sie es verwenden möchten, empfehle ich, das Untermenü aus den Elementen des Menüs zu entfernen, da die width:100%; von der übergeordneten abhängt. Also sollte alles, was breiter sein sollte als das Elternteil, nicht das Kind dieses Elternelements sein. Zusätzlich ist position:absolute abhängig von dem nächsten Elternteil mit position:absolute oder position:relative. Es gibt also viele Dinge, die es nicht einfach machen. Das Verschieben des Untermenüs würde es viel einfacher machen. Dort können Sie einfach width:100%; und position:absolute mit left:0 verwenden.
Alternativ bekommen das Untermenü aus dem Fluss der Seite, Sie position:fixed nutzen könnten. Und width:100%. Überprüfen Sie die Codepen für diese Lösung. Ich mag das erste mehr, auch wenn es mehr Arbeit ist. Fixierte Positionierung hat jedoch einige Nebenwirkungen, aber vielleicht ist es nicht wichtig für Sie.
Zunächst einmal, die Breite des Untermenü eingeschränkt wird, weil es übergeordnetes Element ist hat position: relative.
Sobald das entfernt ist, wird das Untermenü die volle Breite, aber die Elemente sind immer noch nach links ausgerichtet.
Im Beispiel unten habe ich .main-menu-dropdowndisplay: flex verwenden und dann die Elemente zentriert.
http://codepen.io/adrianlynch/pen/RRddjk
.main-menu-dropdown {
position: absolute;
left: -15px;
right: -15px;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
background: black;
}Es ist nicht voller Breite, aber die Breite der Klasse '' col-md-12''. – ScientiaEtVeritas
Ja, wie @ScientiaEtVeritas sagte, dies muss die volle Breite des Browsers sein. So wie '.container-fluid' die volle Breite überspannt. Außerdem möchte ich vermeiden, flex aufgrund von Browser-Inkonsistenzen zu verwenden. – ifusion
Wenn dies der Fall ist, können Sie die links/rechts/Breite anpassen, um es anzupassen. –
Die Position absolute Kind positioniert sich in Bezug auf die nächsthöhere relative Position, so dass das Entfernen der relativen Position für das Hauptmenü li dieses Problem löst. Entfernen Sie auch die Polsterung und den Rand vom Körper und vom HTML.
body, html{
margin: 0;
padding: 0;
}
.main-menu {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
}
.main-menu li {
float: left;
}
.main-menu li a {
display: block;
background: #c2c2c2;
padding: 20px;
color: #337ab7;
text-decoration: none;
}
.main-menu-dropdown {
position: absolute;
left: 0;
right: 0;
display: block;
padding: 0;
list-style-type: none;
background-color: black;
text-align: center;
}
.main-menu-dropdown li {
float: none;
display: inline-block;
margin-left: -4px;
}
.main-menu-dropdown li a {
background: black;
display: inline-block;
}<div class="container">
<div class="col-md-12">
<ul class="main-menu">
<li><a href="#">First item</a></li>
<li>
<a class="has-dropdown" href="#">Second Item</a>
<ul class="main-menu-dropdown clearfix">
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 2</a></li>
<li><a href="#">Sub item 3</a></li>
</ul>
</li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
</ul>
<div class="col-md-12">
I need the sub menu to span the width of the browser
</div>
</div>
</div>
Ihre Beschreibung ist nicht ganz klar. Die Breite des Kindelements ist * nur * abhängig vom Elternelement, wenn das Elternelement "Position: fest, relativ oder absolut" hat. Wenn Sie die "Position" auf dem Elternelement entfernen, nimmt das Kind die Breite des nächsten Großelternteils mit der Position. Hrrrm ... das ist auch nicht klar. –
Sie liegen falsch. Die '' width'' ist abhängig von dem Elternteil. Auch wenn das Element "position: static;" hat (der Standard). – ScientiaEtVeritas
Wenn für ein übergeordnetes Element keine Position explizit festgelegt ist, positioniert sich ein untergeordnetes Element mit Position fix relativ zum nächsten Großelternteil mit Positionssatz. –