div de largeur 100% +10px: par rapport aux parents?
J'ai un ul/li menu avec display:table/table-cell:mise en page automatique, étirée pour remplir le récipient et de le distribuer l'espace horizontal entre les éléments de menu. J'ai d'aligner supplémentaires élément de l'INTERFACE utilisateur, le dernier élément de menu. Je peux réaliser cela par l'ajout de cet élément comme un enfant de la dernière li élément et de le rendre 100% de largeur.
Cependant, j'ai besoin de la position de cet élément d'INTERFACE utilisateur (sélection de la langue) partiellement en dehors de l'essentiel du contenu, j'ai donc de la position de cette famille de droite:-10px. Mais l'effet secondaire est que le bord gauche de la sélection se déplace vers la droite, par rapport à l'élément du menu. Normalement je me serais augmenter le sélecteur div de largeur par 10px, mais depuis qu'il est à 100%, je ne peux pas le faire. Et la mère de li la largeur est déterminée par son contenu textuel.
Est-il un moyen pour obtenir ce droit, à l'aide de pure css? Je ne peux pas ajouter rembourrage sur le sélecteur, parce que j'ai besoin de son enfant de contenu pour remplir l'ensemble de la 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>
Voici un exemple:
http://jsfiddle.net/hJXng/13/
Toute aide est appréciée.
Merci, nan, voir: "je ne peux pas ajouter rembourrage sur le sélecteur, parce que j'ai besoin de son enfant de contenu pour remplir l'ensemble de la div" à la fin. Le rembourrage changera pas de couleur lorsque vous passez la souris sur les ancrages. Du moins pas avec un pur css solution, je suis au courant. (BTW, j'avais mis en place une solution très similaire avec remplissage à droite et onmouseover bg-changement de couleur de la #sélecteur avant de poster ma question.)
Un petit commentaire: votre utilisation de
display:table
, table-cell
, etc, rend difficile l'utilisation de la plupart des CSS trucs que j'ai essayé (par exemple absolu dans le relatif, ou des marges négatives.OriginalL'auteur pandoukht | 2013-03-03
Vous devez vous connecter pour publier un commentaire.
Selon quels navigateurs vous souhaitez soutenir, une solution simple est d'utiliser calc:
Voir aussi: Puis-je utiliser
calc()
Exemple: http://jsfiddle.net/hJXng/19/
J'ai été à la recherche pour somethign comme ça pendant un certain temps maintenant!! Merci!!!!
OriginalL'auteur Kobi
Je ne suis pas sûr de l'endroit où xpy réponses ont disparu, mais ses commentaires enfin fait ma journée. Dû ajouter deux wrapper vrd, depuis un div avec "display: table" n'a pas de remplissage le remplissage en Chrome, tandis que "display: block". Afin de positionnement absolu à 100% à un large bloc div à l'intérieur d'un autre collier div fonctionne réellement.
Violon: http://jsfiddle.net/cPDd6/4/
OriginalL'auteur pandoukht