I vissa fall är vi skyldiga att ta bort punkterna från oordnade och ordnade listor. Att ta bort listpunkterna är inte en komplicerad uppgift med CSS. Det kan enkelt göras genom att ställa in CSS liststil eller list-stil-typ egendom till ingen .
De list-stil-typ CSS-egenskapen används för att ställa in markören (som en skiva, ett tecken eller den anpassade räknarstilen) för en lista element. Denna CSS-egenskap hjälper oss att skapa listan utan punkter. Det kan endast tillämpas på de element vars visningsvärde är inställt på listobjekt. De list-stil-typ egenskapen ärvs, så den kan tillämpas på det överordnade elementet (som eller
) för att få den att gälla för alla listobjekt.
Som standard är de ordnade listobjekten numrerade med arabiska siffror (1, 2, 3, etc.), och objekten i en oordnad lista är markerade med runda punkter (•). De list-stil-typ CSS-egenskapen låter oss ändra standardlistans typ av markör till någon annan typ som kvadrat, cirkel, romerska siffror, latinska bokstäver och många fler.
Om vi sätter dess värde till ingen , kommer det att ta bort markörerna/kulorna. Istället för att ta bort punkterna i en lista kan vi ersätta dem med bilderna. Det gör sajten visuellt mer attraktiv. Det kan göras genom att använda list-stil-bild fast egendom.
Låt oss förstå hur man tar bort punktpunkter genom att använda ett exempel.
Exempel
I det här exemplet använder vi både ordnade och oordnade listor och tillämpar list-stil-typ fastighet med värdet ingen för att ta bort punkterna i listobjekten.
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> Testa det nu Produktion
