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

esinet

24 Feb 2015 à 13:36

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}

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

Si vous aviez quelques pistes à me soumettre, ce serait génial.
D'avance merci
Modifié par esinet (24 Feb 2015 - 13:39)

Toulouse31

24 Feb 2015 à 16:41

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>

esinet

25 Feb 2015 à 08:10

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

esinet

25 Feb 2015 à 08:54

ç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

esinet

25 Feb 2015 à 09:40

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

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

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