La propiedad list-style-position en CSS especifica la posición del cuadro de marcador con respecto al cuadro de bloque principal.
Sintaxis:
list-style-position: outside|inside|initial|inherit;
Valores de propiedad:
- fuera: en este valor, el marcador está fuera del cuadro de bloque principal, es decir, las viñetas estarán fuera del elemento de la lista. Este es el valor predeterminado.
- interior: en este valor, el marcador es el primer elemento entre los contenidos del elemento de la lista, es decir, las viñetas estarán dentro del elemento de la lista.
- initial: este modo establece esta propiedad en su valor predeterminado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-position Property</title>
<style>
.geek1 {
list-style-position: outside;
}
.geek2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
CSS list-style-position Property
</h1>
<h3>list-style-position: outside;</h3>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
<h3>list-style-position: inside;</h3>
<ul class="geek2">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad list-style-position se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 7.0
- Apple Safari 1.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA