Luettelon koon määrittää selain, kirjasin ja kirjasinkoko. Vaikka voit joskus suurentaa fontin kokoa lisätäksesi luettelomerkin kokoa, parempi ratkaisu on käyttää kuvaa luettelomerkkinä.
Jos haluat muuttaa luettelomerkin kuvaksi, käytä sivullasi CSS:ää seuraavan esimerkin mukaisesti.
<style type="text/css">
ul {
list-style: none;
}
ul li {
background: url(https://www.computerhope.com/issues/pictures/bullet.gif) no-repeat top left;
background-position: 0 5px;
line-height: 1.5625;
padding: 0 0 4px 30px;
margin-left: 1em;
}
</style>
Yllä olevassa CSS-koodissa asetamme ensin
- -tunnisteet näyttämään no list -tyyliä, mikä poistaa luettelomerkin järjestämättömästä luettelosta. Seuraavaksi asetimme “ul li”:n muuttamaan vain
- -tunnisteiden ulkonäköä. Tämän osion ensimmäisellä rivillä on tausta, joka osoittaa esimerkissä käyttämäämme luettelokuvaan. Kaikki muut rivit antavat pehmusteen ja marginaalin luodin ympärille.
Kärki
Voit myös luoda CSS-luokan, jos haluat muuttaa yksittäistä luettelomerkkiä tai valittua luettelomerkkiryhmää.
Kun koodi on luotu, mikä tahansa HTML-muotoinen järjestämätön luettelo käyttää luettelomerkkikuvaa luettelomerkkinä.
Esimerkki HTML-koodista
<ul>
<li>First bullet example</li>
<li>Second bullet example</li>
</ul>HTML-koodin tulokset CSS-esimerkin avulla
- Ensimmäinen luoti esimerkki
- Toinen luoti esimerkki
- -tunnisteisiin sisältyvien
