CSS
Lista stilar

Syntax

• list-style: list-style-type | lista-stil-position | lista-stil-bild | initial | ärva;

parametrar

Anmärkningar

Typ av kula eller numrering

Specifikt för <li> -taggar i en oordnad lista ( <ul> ):

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

Specifikt för <li> -taggar i en ordnad lista ( <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., ...) */

Icke-specifik:

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

Bullet Position

En lista består av <li> element inuti ett innehållande element ( <ul> eller <ol> ). Både listobjekt och behållare kan ha marginaler och paddningar som påverkar den exakta positionen för listobjektets innehåll i dokumentet. Standardvärdena för marginal och stoppning kan vara olika för varje webbläsare. För att få samma layout i webbläsare måste dessa ställas in specifikt.

Varje listobjekt får en "markeringsruta" som innehåller kulmarkören. Denna ruta kan antingen placeras inuti eller utanför listobjektrutan.

list-style-position: inside;

placerar kulan i <li> -elementet och skjuter innehållet åt höger efter behov.

list-style-position: outside;

placerar kulan till vänster för <li> -elementet. Om det inte finns tillräckligt med utrymme i stoppningen av det innehållande elementet kommer markörrutan att sträcka sig till vänster även om den skulle falla av sidan.

Visar resultatet av placeringen inside och outside : jsfiddle

Ta bort kulor / siffror

Ibland bör en lista bara inte visa några punkter eller siffror. Kom ihåg att ange marginal och stoppning.

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

CSS

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