La tarea es configurar el marcador de elemento de lista para que aparezca dentro del flujo de contenido en CSS. Para especificar el tipo de marcador de elementos de la lista, puede usar las propiedades list-style-type y list-style-position. El flujo de contenido es el conjunto de reglas que define qué elemento viene antes de otro, cuál se sienta encima de otro, etc.
- list-style-type: se utiliza para especificar el tipo de marcador de elemento de lista en una lista.
- list-style-position: se utiliza para especificar la posición de los marcadores de elementos de lista.
Sintaxis –
list-style-position: value;
Donde el valor es –
- interior: las viñetas estarán dentro del elemento de la lista.
- outside (predeterminado): las viñetas estarán fuera del elemento de la lista.
- initial: establece esta propiedad en su valor predeterminado.
- heredar: hereda esta propiedad de su elemento principal.
Acercarse –
- Cree el archivo HTML con el elemento de lista.
- Uso de la propiedad list-style-position para configurar el marcador de elemento de lista para que aparezca dentro del flujo de contenido.
Ejemplo –
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-size: 20px;
text-align: center;
}
ul.x {
list-style-position: inside;
background-color: lightgreen;
list-style-type: square;
}
ul.y {
list-style-position: outside;
list-style-type: square;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<p>List-style-position: inside</p>
<ul class="x">
<li>Database</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
<p>List-style-position: outside</p>
<ul class="y">
<li>Database</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
</body>
</html>
Producción –
