list-style-position

  • Raccourci de la révision : CSS/list-style-position
  • Titre de la révision : list-style-position
  • ID de la révision : 170077
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire /* Mise à jour Spécs */

Contenu de la révision

{{template.CSSRef()}}

Résumé

list-style-position définit la position de la puce par rapport à la boîte principale.

  • Valeur initiale : outside
  • Appliquée à : éléments de type 'display: list-item'
  • Héritée : oui
  • Pourcentages : N/A
  • Média : visual
  • Valeur calculée : telle que spécifiée

Syntaxe

list-style-position: inside | outside | inherit

Valeurs

outside 
La puce se trouve à l'extérieur de la boîte principale.
inside 
La puce est la première boîte en ligne dans la boîte bloc principale, après laquelle s'insère le contenu de l'élément.

Exemples

Ce code HTML :

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

avec les règles suivantes :

li {
    list-style-position: inside;
    border: 1px solid #000;      /* La bordure colorée aide à bien distinguer la différence
                                    entre l'intérieur et l'extérieur */
}

s'affichera ainsi : image:List-style-position_inside.png


Le même code HTML avec les règles suivantes :

li {
    list-style-position: outside;
    border: 1px solid #000;      /* La bordure colorée aide à bien distinguer la différence
                                    entre l'intérieur et l'extérieur */
}

s'affichera ainsi  : image:list-style-position_outside.png

Spécifications

Compatibilité des navigateurs

Voir également

{{wiki.template('Référence_CSS:list-style')}}

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/list-style-position", "pl": "pl/CSS/list-style-position" } ) }}

Source de la révision

<p>
</p><p>{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p><code>list-style-position</code> définit la position de la puce par rapport à la boîte principale.
</p>
<ul><li> Valeur initiale : outside
</li><li> Appliquée à : éléments de type 'display: list-item'
</li><li> Héritée : oui
</li><li> Pourcentages : N/A
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visual">visual</a>
</li><li> Valeur calculée : telle que spécifiée
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">list-style-position: inside | outside | inherit
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> <code>outside</code> </dt><dd> La puce se trouve à l'extérieur de la boîte principale.
</dd><dt> <code>inside</code> </dt><dd> La puce est la première boîte en ligne dans la boîte bloc principale, après laquelle s'insère le contenu de l'élément.
</dd></dl>
<h3 name="Exemples"> Exemples </h3>
<p>Ce code HTML :
</p>
 <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</li>
 </ul>
<p>avec les règles suivantes :
</p>
<pre class="eval">li {
    list-style-position: inside;
    border: 1px solid #000;      /* La bordure colorée aide à bien distinguer la différence
                                    entre l'intérieur et l'extérieur */
}
</pre>
<p>s'affichera ainsi :
<img alt="image:List-style-position_inside.png" src="File:fr/Media_Gallery/List-style-position_inside.png">
</p><p><br>
Le même code HTML avec les règles suivantes :
</p>
<pre class="eval">li {
    list-style-position: outside;
    border: 1px solid #000;      /* La bordure colorée aide à bien distinguer la différence
                                    entre l'intérieur et l'extérieur */
}
</pre>
<p>s'affichera ainsi  :
<img alt="image:list-style-position_outside.png" src="File:fr/Media_Gallery/List-style-position_outside.png">
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#list-style-position">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1 (en)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-position">CSS 3 (en)</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{wiki.template('Référence_CSS:list-style')}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/list-style-position", "pl": "pl/CSS/list-style-position" } ) }}
Revenir à cette révision