CSS Dropdown-Menü mit dem Untermenü an der rechten Kante des übergeordneten Elements ausrichten
Hier ist ein sehr einfaches Beispiel für ein CSS-basiertes Dropdown-Menü: Ссылка
%Vor%Aber ich kann keine Lösung finden, um das Untermenü an der rechten Kante des Elternteils auszurichten:
5 Antworten
In diesem Menü wird das Verbergen / Anzeigen durch Ändern der Eigenschaft left erreicht. Sie müssen lediglich die CSS-Regel anpassen, die den Show-Mechanismus für das Untermenü steuert:
anstatt es nach links auszurichten, wollen wir es nach rechts ausrichten, also fügen wir right:0; hinzu. Wenn wir jedoch die linke Deklaration nicht berühren, wird das Menü abgeschnitten. Daher schreiben wir anstelle von left:0; left:auto; , um das Menü auf seine tatsächliche Breite zu erweitern. Um die Marge des Elternteils li zu berücksichtigen, addieren wir den gleichen Betrag wie die negative Marge und wir sind fertig:
Es ist besser und sauberer, wenn Sie Ihre Liste nach rechts positionieren und anstatt UL aus dem Bildschirm zu entfernen, können Sie einfach die Anzeigeeigenschaft von None auf Blockieren umschalten.
Sie müssen einige Änderungen an diesen Regeln vornehmen und diese Eigenschaften hinzufügen:
%Vor%Siehe meine aktualisierte Geige: Ссылка
Fügen Sie die Bootstrap-Klasse .pull-right zu <div class='btn-group' hinzu. Sollte wie folgt aussehen:
<div class='btn-group pull-right'
Um automatisch Drop-downs auf der rechten Seite rechts auszurichten:
%Vor%