Sådan fjerner du kugler i CSS

Som standard, når en webbrowser viser en uordnet liste på en webside, har hvert element i listen en forudgående kugle. Denne adfærd er ikke altid ønskelig, og passer muligvis ikke med dit overordnede design til siden. Ved hjælp af CSS kan du oprette en klasse for at fjerne kuglerne fra bestemte lister på din side, eller du kan målrette HTML-koden "ul" direkte for at fjerne kuglerne fra alle lister på siden.

1.

Opret en ny HTML-side i et tekstredigeringsprogram eller et webudviklingsprogram.

2.

Opret en simpel uordnet liste ved at tilføje følgende HTML til sidekroppen:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Gem siden og se i en webbrowser. Du vil se, at browseren viser en kugle ved siden af ​​hvert element i listen.

3.

Tilføj følgende kode til sektionen på siden:

Dette fjerner kuglerne fra enhver liste ved hjælp af klassen "myList". Gem siden og genindlæs i din webbrowser for at se ændringerne.

4.

Skift CSS-regel:

.myList {listestil-type: none;}

Til:

ul {liste-stil-type: none; }

Dette er rettet mod HTML "ul" -taggen, og fjerner kuglerne fra alle uordnede lister på din side. Tilføj et andet eksempel liste, og se siden i din webbrowser for at bekræfte begge lister vist uden kugler.

Tip

  • Du kan bruge dine egne billeder i stedet for browserens standardkugler ved at anvende CSS "list-style-image" -egenskaben til menuen.