CSS
Listar estilos

Sintaxis

• estilo de lista: tipo de estilo de lista | list-style-position | list-style-image | inicial | heredar;

Parámetros

Observaciones

Tipo de viñeta o numeración

Específico para etiquetas <li> dentro de una lista no ordenada ( <ul> ):

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

Específico para etiquetas <li> dentro de una lista ordenada ( <ol> ):

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

No específico:

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

Posición de la bala

Una lista consta de elementos <li> dentro de un elemento contenedor ( <ul> o <ol> ). Tanto los elementos de la lista como el contenedor pueden tener márgenes y rellenos que influyen en la posición exacta del contenido del elemento de la lista en el documento. Los valores predeterminados para el margen y el relleno pueden ser diferentes para cada navegador. Para obtener el mismo navegador cruzado de diseño, estos deben configurarse específicamente.

Cada elemento de la lista obtiene un 'cuadro de marcador', que contiene el marcador de viñeta. Este cuadro puede colocarse dentro o fuera del cuadro de elemento de lista.

list-style-position: inside;

coloca la viñeta dentro del elemento <li> , empujando el contenido hacia la derecha según sea necesario.

list-style-position: outside;

coloca la bala a la izquierda del elemento <li> . Si no hay suficiente espacio en el relleno del elemento que lo contiene, el cuadro de marcador se extenderá hacia la izquierda, incluso si se cae de la página.

Mostrando el resultado de posicionamiento inside y outside : jsfiddle

Eliminando Balas / Números

A veces, una lista no debe mostrar ningún punto o número. En ese caso, recuerde especificar el margen y el relleno.

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
}