Accueil    HTML    Balise LI
 



balise li  Balise LI : List item

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture facultatif (</li> en xhtml) | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari




La balise <li> encapsule des éléments présents dans des listes. Elle est toujours employée lors de l'utilisation de listes ordonnées, déclarées avec la balise <ol>, ou non ordonnées : balise <ul>.
Les éléments <dir> et <menu> emploient également la balise <li> pour encapsuler les éléments qu'ils contiennent.

Il est possible de modifier l'apparence de la puce devant un élément contenu dans la balise <li> en utilisant le style css "list-style-type". Ce style prend comme valeurs possibles :


  • none : pas de puce
  • inherit : hérite de la valeur si elle existe de l'élément parent
  • circle : puce en forme de cercle vide
  • disc : puce en forme de disque plein
  • square : puce en forme de carré
  • decimal : numérotation
  • decimal-leading-zero : numérotation avec un 0 précédant les valeurs (01, 02 ...)
  • lower-alpha et lower-latin : valeurs alphanumériques en minuscules : a, b, c ...
  • upper-alpha et upper-latin : valeurs alphanumériques en majuscules : A, B, C ...
  • lower-greek : valeurs en grec : alpha, beta ...
  • lower-roman : valeurs numériques latines minuscules : i, ii, iii ...
  • upper-roman : valeurs numériques latines majuscules : I, II, III ...
  • armenian
  • georgian
  • hiragana
  • katakana


D'autres styles sont applicables comme par exemple list-style-image qui remplace la puce par l'image spécifiée et le style list-style-position qui spécifie si la puce est positionnée au niveau de l'élément ou bien en retrait (marge négative).



Propriétés pour la balise li :




Propriétés Définition Valeurs
type Spécifie l'apparence de la puce précédent le texte.
Déprécié, il faut utiliser le style CSS "list-style-type"
disc
square
circle
1
A, a
I, i
value Indique le numéro de l'élément dans la liste.
Déprécié, il faut utiliser le style CSS ""
Valeur


Exemple d'utilisation de la balise li :





Listes imbriquées avec affichage des puces décimales et alphabétiques et référence à des images :


<ul style="list-style-type:decimal;">
   <li>catégorie 1</li>
   <li>catégorie 2</li>
   <li>catégorie 3
      <ul style="list-style-type:lower-alpha;">
         <li>Sous catégorie 3.1</li>
         <li>Sous catégorie 3.2</li>
         <li>Sous catégorie 3.3</li>
      </ul>
   </li>
   <li>catégorie 4</li>
   <li>catégorie 5</li>
</ul>



<ul>
   <li style="list-style-image:url(../images/ICO_Plus.gif);">catégorie 1</li>
   <li style="list-style-image:url(../images/ICO_Moins.gif);">catégorie 2
      <ul style="list-style-type:hiragana;">
         <li>Sous catégorie 2.1</li>
         <li>Sous catégorie 2.1</li>
      </ul>
   </li>
   <li style="list-style-image:url(../images/ICO_Plus.gif);">catégorie 3</li>
</ul>


Liste en mode menu :
(on utilise ici le style CSS display, il est également possible d'utiliser la propriété float)

<ul style="display:inline; border:solid 1px black; list-style-type:none; margin:0px;
          background-color:lightgrey; padding:5px; color:midnightblue;">
   <li style="display:inline; padding-right:10px;">Elément 1</li>
   <li style="display:inline; padding-right:10px;">Elément 2</li>
   <li style="display:inline; padding-right:10px;">Elément 3</li>
   <li style="display:inline;">Elément 4</li>
</ul>



  • catégorie 1
  • catégorie 2
  • catégorie 3
    • Sous catégorie 3.1
    • Sous catégorie 3.2
    • Sous catégorie 3.3
  • catégorie 4
  • catégorie 5


Liste avec référence à des images pour remplacer les puces classiques :

  • catégorie 1
  • catégorie 2
    • Sous catégorie 2.1
    • Sous catégorie 2.1
  • catégorie 3



Liste en mode menu :

  • Elément 1
  • Elément 2
  • Elément 3
  • Elément 4