Ich habe ein ul / li-Menü mit display: table / table-cell: automatisches Layout, gestreckt, um den Container zu füllen und den horizontalen Abstand zwischen den Menüpunkten zu verteilen. Ich muss ein zusätzliches UI-Element auf den letzten Menüpunkt ausrichten. Ich kann dies erreichen, indem ich dieses Element als Kind des letzten li-Elements hinzufüge und es 100% breit mache.
Allerdings muss ich dieses UI-Element (Sprachauswahl) teilweise außerhalb des Hauptinhalts positionieren, also positioniere ich das mit einem relativen Recht: -10px. Der Nebeneffekt ist jedoch, dass sich die linke Kante des Selektors im Vergleich zum Menüelement nach rechts bewegt. Normalerweise würde ich die Breite des Selektors um 10 Pixel erhöhen, aber da es 100% ist, kann ich das nicht tun. Und die Breite des Elternteils wird durch seinen Textinhalt bestimmt.
Gibt es eine Möglichkeit, das mit reinem CSS richtig zu machen? Ich kann keine Füllung auf dem Selektor hinzufügen, da ich seinen untergeordneten Inhalt brauche, um das gesamte div zu füllen.
%Vor%Hier ist ein funktionierendes Beispiel: Ссылка
Jede Hilfe ist willkommen.
Ich bin mir nicht sicher, wohin die Antworten von xpy gegangen sind, aber seine / ihre Kommentare haben meinen Tag endgültig beendet. Musste zwei Wrapper divs hinzufügen, da ein div mit "display: table" das Padding in Chrome nicht füllte, während "display: block" das tat. Die absolute Positionierung eines 100% breiten Block-Div in einem anderen gepolsterten Div funktioniert also tatsächlich.
%Vor%Geige: Ссылка
Je nachdem, welche Browser Sie unterstützen möchten, verwenden Sie einfach calc :
%Vor% Siehe auch: Kann ich calc() verwenden?
Beispiel: Ссылка