Quelle théorie derrière cette Li

Par Zigo Zigomario, il y a 9 ans

Les bases HTML/CSS

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

2 réponses

Jeremy Ranoux, il y a 9 ans

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, il y a 9 ans

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