Forum : Quelle théorie derrière cette Li

Bonjour,

Situation de cas simplissime mais je ne comprend toujours pas la théorie du pourquoi...et ça me chagrine.

Prenez une div , une ul, quelques li :

      <div>
        <ul>
          <li>nous</li>
          <li>me revoilà </li>
        </ul>  
      </div

On taille en hauteur et largeur div et ul
On taille les li en largeur de manière à ce que, (pour l'exemple de la seconde li ), "revoilà" passe en dessous de "me".
On met heigth 100% aux li :

   div {

    width:500px;
    height: 100px;
  }
  ul {

    border: 2px solid green;
    height: 100%;
  }

  li {
    display: inline-block;
    border: 1px solid blue;
    width: 14%;
    height: 100%;
  }

Voici le résultat :

D'où, diable, sort cette espace blanc avant la première li ???
Et du coup, j'en profite, quelle est votre best pratice pour le retour à la ligne forcé dans une li ? ( pas de br please )

merci par avançe

Jeremy Ranoux

Réponse acceptée

Bonjour, pour moi c'est les puces de ta liste qui te gêne, je m'explique , tu vois les " points noirs " lorsque tu créees une liste, hé bien celle ci ''reste" , du coup les deux se cumulent et donne cette effet , rajoutes display: inline; sur ton li , ça enlevera cet effet et la taille de t'es LI feront celle de leur contenu. Tu as aussi display: table-cell; qui va faire ne sorte que t'es LI se comportent comme des cellules de tableau mais ne feront plus 100% de la div en hauteur mais de leur contenu.

Voilà j'èspère avoir pu t'aider

Zigo Zigomario

Auteur

Bnjour,

merci de ton retour.
La théorie des puces toujours considéré par le Dom malgré un list-style-type:none pourrait effectivement expliquer l'histoire.
Ceci dit, cet espace blanc est crée uniquement quand deux lignes se forment ( voir me / revoilà ), je reste donc sceptique.

Pour le reste, à partir de tes conseils, j'ai su trouver une solution, et au passage, supprimer les white space :

ul {

  border: 2px solid green;
  height: 100%;
  display:table;
  width: 100%;
  table-layout: fixed;
  word-spacing: -2rem;
}

li {
  display: table-cell;
  border: 1px solid blue;
  width: 14%;
  height: 100%;
  word-spacing: normal;

}

merci bien

Quelle théorie derrière cette Li

2 réponses