Joissakin tilanteissa saatat haluta luoda luettelomerkin ilman luettelomerkkejä tai luettelokohteita ilman luettelomerkkejä. Voit luoda järjestetyn luettelon tai järjestämättömän luettelon ilman luettelomerkkejä noudattamalla alla olevia ohjeita.
HTML esimerkki
“List-style: none” CSS-luokan lisääminen järjestämättömään listaan (
- ) tai järjestykseen listaan (
- ) poistaaksesi luettelomerkit joistakin ja pitää muut luettelomerkit ennallaan.
- Luettelokohde ilman luettelomerkkiä
- Toinen kohde
- ) poistaa kaikki luettelomerkit tai numerot.
<ul style="list-style: none;"> <li>List item with no bullet</li> <li>Second item</li> </ul>
HTML CSS-esimerkillä
Vaikka yllä oleva esimerkki toimii lähes kaikissa tilanteissa, on parempi, että CSS on erillisessä ulkoisessa tiedostossa. Alla on CSS ja HTML, jotka poistavat luettelomerkit.
Alla olevan CSS:n käyttäminen poistaa luettelomerkit kaikista järjestämättömistä linkeistä (
- ). Tämä CSS voi olla hyödyllinen, jos et aio käyttää luettelomerkkejä tai haluat käyttää kuvaa luodin sijaan.
<style type="text/css">
ul {
list-style-type: none;
}
</style>
Jos aiot olla vain yksi luettelo, etkä luettelomerkkejä tai numeroita, on parempi idea luoda luokka, jota käytetään aina, kun et halua luettelomerkkejä:
<style type="text/css">
.nobull {
list-style-type: none;
}
</style>
Yllä olevassa CSS:ssä luodaan uusi luokka nimeltä “nobull”. Tätä luokkaa voidaan sitten käyttää milloin tahansa, kun et halua luotia alla olevan esimerkin mukaisesti.
<ul class="nobull"> <li>List item with no bullet</li> <li>Second item</li> </ul>
Voit myös käyttää tätä luokkaa mihin tahansa luettelokohteeseen (
Esimerkkituloste
Alla on esimerkki siitä, kuinka järjestämättömän luettelomerkkiluettelon tulos näkyy ilman sen luettelomerkkejä.
