A golyó méretét a böngésző, a betűtípus és a betűméret határozza meg. Habár néha növelheti a betűméretet, hogy növelje a golyó méretét, a jobb megoldás, ha egy képet golyóként használunk.
Ha egy golyót képre szeretnénk változtatni, használja az oldalunkon található CSS-t a következő példához hasonlóan.
ul {list-style: nincs; } ul li { background: url (// www.computerhope.com/issues/pictures/bullet.gif) balra nem ismétlődő; háttér-pozíció: 0 5px; vonalmagasság: 1, 5625; párnázás: 0 0 4px 30px; margin-left: 1em; } A fenti CSS-kódban először a
- címkék, amelyek nem jelennek meg a lista stílusa, amely eltávolítja a golyót a rendezetlen listából. Ezután az "ul li" beállítást csak a megjelenés megváltoztatására állítottuk be
- címkékben található címkék
- címkéket. Ennek a szakasznak az első sorában a háttér, amely a példában használt golyóképre utal. Ebben az esetben az összes többi vonal a golyó körül a párnázást és a margót adja.
Tipp: CSS osztályt is létrehozhat, ha egyetlen listát vagy kiválasztott listát szeretne módosítani egy listában.
Miután létrehozta a kódot, bármely HTML rendezetlen lista a golyó képként használja a golyót.
Példa HTML kódra
- Első bullet példa
- Második golyó példa
A HTML-kód eredményei a CSS példával
- Első bullet példa
- Második golyó példa