div Breite 100% + 10px: relativ zu Eltern?

Ich habe ein UL/li-Menü mit Anzeige: Tabelle/Tabelle-Zelle: Auto-Layout, gestreckt, um den Container zu füllen und horizontalen Raum zwischen den Menüelementen 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 Elements hinzufüge und es 100% breit mache.div Breite 100% + 10px: relativ zu Eltern?

Allerdings muss ich dieses UI-Element (Sprachauswahl) teilweise außerhalb des Hauptinhalts positionieren, also positioniere ich dies durch ein relatives 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 den untergeordneten Inhalt brauche, um das gesamte div zu füllen.

<div class="menu"> 
    <ul> 
     <li><a href="#">first</a> 
     </li> 
     <li><a href="#">second</a> 
      <div id="selector"> 
       <a href="#">EN</a> 
       <a href="#">FR</a> 
      </div> 
     </li> 
    </ul> 
</div>

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/hJXng/13/

Jede Hilfe sehr geschätzt wird.

Quelle

2013-03-03 pandoukht

Ist das, was Sie gehen? Ich entfernte die rechte Regel -10px und fügte einige linke Füllzeichen und eine passende Hintergrundfarbe hinzu. http://jsfiddle.net/hJXng/16/ –

Danke, nein, siehe: "Ich kann keine Füllung auf dem Selektor hinzufügen, weil ich seinen Kind-Inhalt brauche, um das ganze div zu füllen" am Ende. Das Padding ändert seine Farbe nicht, wenn Sie den Mauszeiger über die Anker bewegen. Zumindest nicht mit einer reinen CSS-Lösung, die mir bekannt ist. (BTW, ich hatte eine sehr ähnliche Lösung mit richtigen Polsterung und onmouseover bg-Farbwechsel auf dem #selector implementiert, bevor Sie meine Frage.) – pandoukht

Ein kleiner Kommentar: Ihre Verwendung von 'display: table',' table-cell', etc , macht es schwierig, die meisten CSS-Tricks zu verwenden, die ich probiert habe (zB absolut relativ oder negative Ränder. – Kobi

Ich bin nicht sicher, wo xpy die Antworten haben gegangen, aber seine/ihre Kommentare haben endlich meinen Tag gemacht. Musste zwei Wrapper divs hinzufügen, da ein div mit "display: table" die 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.

#selector-full { 
    width: 100%; 
    position: absolute; 
    display: block; 
    right: 0; 
}

Fiddle: http://jsfiddle.net/cPDd6/4/

Quelle

2013-03-06 11:35:05 pandoukht

Je nachdem, was Browser Sie unterstützen möchten, eine einfache Möglichkeit ist die Verwendung calc:

width: calc(100% + 10px);

Siehe auch: Can I use calc()
Beispiel: http://jsfiddle.net/hJXng/19/

Quelle

2013-03-03 09:02:58 Kobi

Danke Kobi, nett. Obwohl ich IE8 unterstützen muss, bummer. – pandoukht

Ich habe nach etwas gesucht, das so für ein während jetzt !! Danke! –

div Breite 100% + 10px: relativ zu Eltern?

Antwort

Verwandte Themen