Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de posición de estilo de lista
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada ubicación de estilo de lista Con sintaxis y ejemplos.
describir
La propiedad CSS list-style-position define la posición del marcador de elemento de lista dentro del cuadro de bloque del cuerpo.
sintaxis
La sintaxis de la propiedad CSS list-style-position es:
list-style-position: value;parámetro o parámetro
valor
La apariencia del elemento del elemento de la lista. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| en | El cuadro de marcador está dentro del cuadro de bloque principal. ul { ubicación de estilo de lista: interna; } |
| externo | El cuadro de marcador está fuera del cuadro de bloque del cuerpo (este es el valor predeterminado) ul { ubicación de estilo de lista: externa; } |
| heredar | El elemento heredará la posición del estilo de lista de su elemento principal ol { ubicación de estilo de lista: heredar; } |
notas
- La propiedad list-style-position se puede aplicar a
- ,
- Etiqueta.
- list-style-position se aplica a los elementos con display: list-item.
- Si no se especifica la propiedad list-style-position, se establece por defecto en outside.
- Consulte también las propiedades list-style, list-style-image y list-style-type.
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
- o
Compatibilidad del navegador
La propiedad CSS list-style-position tiene soporte básico para los siguientes navegadores:
ejemplo
Discutiremos la propiedad de posición de estilo de lista a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
externo
Veamos un ejemplo de posición de estilo de lista CSS donde establecemos la posición de estilo de lista en externo.
HTML se ve así:
<ol> <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li> <li>CheckYourMath.com has answers to your every day Math questions.</li> <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li> </ol>CSS se ve así:
ol { list-style-position: outside; background: lightgreen; }La lista ordenada se ve así:
En este ejemplo de posición de estilo de lista CSS, establecemos la posición de estilo de lista en externo. Esto hace que los marcadores de los elementos de la lista (es decir, los números) aparezcan con menos sangría, y cuando el texto del elemento de la lista se ajusta, el texto sigue estando más sangrado que el número.
en
A continuación, veamos un ejemplo de posición de estilo de lista de CSS en el que establecemos la posición de estilo de lista en el interior.
HTML se ve así:
<ol> <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li> <li>CheckYourMath.com has answers to your every day Math questions.</li> <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li> </ol>CSS se ve así:
ol { list-style-position: inside; background: lightgreen; }La lista ordenada se ve así:
En este ejemplo de posición de estilo de lista de CSS, configuramos la posición de estilo de lista en el interior. Esto hace que los marcadores de los elementos de la lista (es decir, los números) aparezcan más sangrados, y cuando el texto del elemento de la lista se ajusta, el texto ajustado se alinea con los números.