En HTML, il y a 2 types d’instruction pour faire des listes:
- <ul> pour faire des listes non ordonnées
- <ol> pour faire des listes ordonnées
Dans les 2 cas, les éléments de la liste sont encadrés par la balise: <li> texte </li>
Un exemple de liste non ordonnée serait:
<ul> <li> L'instruction morale et civique ; </li> <li> L'histoire et la géographie ; </li> <li> Des notions élémentaires de sciences avec leurs applications à l'agriculture et à l'hygiène. </li> </ul>
Le résultat est le suivant:
liste non ordonnée (<ul>)
Un exemple de liste ordonnée est:
<ol> <li> L'instruction morale et civique ; </li> <li> L'histoire et la géographie ; </li> <li> Des notions élémentaires de sciences avec leurs applications à l'agriculture et à l'hygiène. </li> </ol>
Le résultat est le suivant:
Liste ordonnée (<ol>)
Alignement des éléments dans une liste
En regardant de plus près il apparait que le texte du troisième élement de la liste n’est pas aligné à gauche avec les 2 autres éléments.
Ceci est dû au fait que le texte est par défaut justifié et donc le Kindle ajoute des espaces pour permettre cette justification à droite et à gauche.
La première idée serait d’ajouter au niveau de l’élément <li> un attribut du genre:style="text-align:left'" ou bien créer une classe ‘left’ avec dans votre css:
.left {
text-align: left;
}
et d’associer cette classe à votre élément <li>:
<li class='left'>
Malheureusement, aucune de ces 2 solutions ne marche.
Après de nombreux essais, la seule solution qui semble marcher est:
<li align="left"> Des notions élémentaires de sciences avec leurs applications à l'agriculture et à l'hygiène. </li>
et le résultat obtenu est:
Liste alignée à gauche
Autres considérations sur les listes
Il est possible de mettre une liste dans une liste. Cependant il faut tenir compte de la taille limitée de l’écran d’un Kindle et cette pratique est déconseillée car la lecture devient très vite fastidieuse!
Dernière remarque: n’essayez pas de mettre le texte de vos liste dans des balises de paragraphe <p> : le résultat obtenu est décevant:
Liste avec <p> dans <li>
Oui, je sais… la mise au point d’un code html qui est correctement rendu par un Kindle est parfois frustrante. De nombreux essais/erreurs sont requis pour trouver la bonne combinaison!
