logo

Kuinka poistaa luettelomerkit CSS:stä?

Joissain tapauksissa meidän on poistettava järjestämättömien ja järjestettyjen luetteloiden luettelomerkit. Luettelomerkkien poistaminen ei ole monimutkainen tehtävä CSS:n avulla. Se voidaan tehdä helposti asettamalla CSS listatyyliin tai lista-tyylinen omaisuutta ei mitään .

The lista-tyylinen CSS-ominaisuutta käytetään asettamaan merkin (kuten levy, merkki tai mukautettu laskurityyli) a lista kohteen elementti. Tämä CSS-ominaisuus auttaa meitä luomaan luettelon ilman luettelomerkkejä. Sitä voidaan soveltaa vain niihin elementteihin, joiden näyttöarvo on asetettu luettelo-kohde. The lista-tyylinen ominaisuus on peritty, joten sitä voidaan soveltaa pääelementtiin (esim

    tai
      ), jotta se koskee kaikkia luettelon kohteita.

      Oletusarvoisesti järjestetyt luettelon kohteet on numeroitu arabialaisilla numeroilla (1, 2, 3 jne.), ja järjestämättömän luettelon kohteet on merkitty pyöreillä luettelomerkeillä (•). The lista-tyylinen CSS-ominaisuuden avulla voimme muuttaa merkin oletusluettelotyypin mihin tahansa muuhun tyyppiin, kuten neliö, ympyrä, roomalaiset numerot, latinalaiset kirjaimet ja monet muut.

      Jos asetamme sen arvoksi ei mitään , se poistaa merkit/luodit. Sen sijaan, että poistaisimme luettelomerkit, voimme korvata ne kuvilla. Se tekee sivustosta visuaalisesti houkuttelevamman. Se voidaan tehdä käyttämällä listatyylinen kuva omaisuutta.

      Ymmärretään, miten luettelopisteet poistetaan esimerkin avulla.

      Esimerkki

      Tässä esimerkissä käytämme sekä järjestettyjä että järjestämättömiä listoja ja käytämme lista-tyylinen omaisuutta arvolla ei mitään poistaaksesi luettelon kohteiden luettelomerkit.

       ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> 
      Testaa nyt

      Lähtö

      Kuinka poistaa luettelomerkit CSS:stä