18010 sujets

Questions générales et questions de débutants

[Résolu] Css avec balise li et nth-child

Bonjour,
J'ai cinq balises <li> de même rang, dans la même <div> (#principal). (c'est dans un menu, et je ne peux pas scinder la div)

Avec le css suivant
#principal > li {width:200px; float:left;}

j'obtiens bien un alignement horizontal. upload/57876-code2.jpg

Je voudrais que les trois premières balises <li> restent verticales et que les deux dernières soient horizontales.
J'y suis presque avec le code css :
#principal > li:nth-child(n+3) { width:200px; float:left}

upload/57876-code3.jpg

Hélas, je n'arrive pas à faire remonter les 4 et 5e balises ... comme ça, ce serait mieux :
upload/57876-code4.jpg

Si vous aviez quelques pistes à me soumettre, ce serait génial.
D'avance merci
Modifié par esinet (24 Feb 2015 - 13:39)
Bonjour, C'est peut être un peu tiré par les cheveux, mais peut-être une piste :
<style>

ul li {
width:50px;
line-height:50px;
margin:2px;
text-align:center;
background:red;
position:relative;
list-style:none;
}
li:nth-child(n+4) {position:relative;left:53px;top:-158px;float:left;margin-left:1px }
</style>
<body>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

</body>
Merci pour cette réponse.
Hélas, les 3 premières boîtes n'ont pas un contenu de hauteur fixe.
Mais je vais essayer d'en tirer qqch.
Bonne continuation
ça pourrait marcher ... mais pas le même résultat d'un navigateur à l'autre ... et si on réduit la taille de la fen^tre ... tout explose.
Je cherche toujours ...
D'avance merci
Trouvé !!!
la réponse était dans les pages alsacréations : "le modéle tabulaire en css"
http://www.alsacreations.com/tuto/lire/1524-le-modele-tabulaire-en-css.html


#principal  {
{
  display:table;
  table-layout:fixed;
  border-spacing:10px;
}
#principal > li:nth-child(n+4) {
  display:table-cell;
}


Merci pour tout
Cordialement
Sujet clos
Aller à