div larghezza 100% + 10px: relativo al genitore?

Ho un menu ul/li con display: tabella/tabella-cella: layout automatico, allungato per riempire il contenitore e distribuire lo spazio orizzontale tra le voci del menu. Devo allineare un elemento UI aggiuntivo all'ultima voce di menu. Posso ottenere questo risultato aggiungendo quell'elemento come figlio dell'ultimo elemento li e rendendolo ampio al 100%.div larghezza 100% + 10px: relativo al genitore?

Tuttavia, ho bisogno di posizionare questo elemento dell'interfaccia utente (selettore di lingua) parzialmente fuori dal contenuto principale, quindi lo posiziono con un diritto relativo: -10px. Ma l'effetto collaterale è che il lato sinistro del selettore si sposta a destra, rispetto all'elemento menu. Normalmente aumenterei la larghezza del selector div di 10px, ma dato che è 100%, non posso farlo. E la larghezza del genitore è determinata dal suo contenuto testuale.

C'è un modo per farlo correttamente usando puro css? Non posso aggiungere pad sul selettore, perché ho bisogno del suo contenuto figlio per riempire l'intero div.

<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>

Ecco un esempio di lavoro: http://jsfiddle.net/hJXng/13/

Ogni aiuto è apprezzato.

fonte

2013-03-03 pandoukht

E 'questo quello che stai andando per? Ho rimosso la regola di destra di -10px e aggiunto un po 'di padding sinistro e un colore di sfondo da abbinare. http://jsfiddle.net/hJXng/16/ –

Grazie, no, vedi: "Non posso aggiungere padding sul selettore, perché ho bisogno del suo contenuto figlio per riempire l'intero div" alla fine. Il padding non cambierà il suo colore quando si passa sopra gli ancoraggi. Almeno non con una soluzione di css pura di cui sono a conoscenza. (A proposito, avevo implementato una soluzione molto simile con il riempimento destro e la modifica di bg-color su #selector prima di postare la mia domanda.) – pandoukht

Un piccolo commento: l'uso di 'display: table',' table-cell', etc , rende difficile l'uso della maggior parte dei trucchi CSS che ho provato (ad esempio: assoluto in relativo, o margini negativi. – Kobi

non sono sicuro dove le risposte di Xpy hanno andato, ma i suoi commenti alla fine hanno reso la mia giornata. Ho dovuto aggiungere due div wrapper, dato che un div con "display: table" non riempiva il padding in Chrome, mentre "display: block" lo faceva. Quindi il posizionamento assoluto di un blocco di blocco del 100% all'interno di un altro div imbottito funziona effettivamente.

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

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

fonte

2013-03-06 11:35:05 pandoukht

seconda di ciò che i browser si vuole sostenere, una semplice opzione è quella di utilizzare calc:

width: calc(100% + 10px);

Vedi anche: Can I use calc()
Esempio: http://jsfiddle.net/hJXng/19/

fonte

2013-03-03 09:02:58 Kobi

Grazie Kobi, bello. Anche se devo supportare IE8, peggio. – pandoukht

Ho cercato qualcosa di simile per un mentre ora !! Grazie! –

div larghezza 100% + 10px: relativo al genitore?

risposta

Problemi correlati