Can the HTML list style be removed? How to remove the little black spots in front of li

In work, we often use lists. Lists are divided into ordered lists and unordered lists. Unordered lists will display solid dots on the page, and ordered lists will display serial numbers. However, sometimes we I don't want it. I think it is redundant. There is no need to display the dots and serial numbers in front of the list. Can I remove the list style? How to remove the dot in front of li? Next, give examples and explain with code and pictures.

Look at this example. I used an unordered list to write the names of the four beauties in ancient times. Let’s see what the effect will be if the list style is not removed.

<ul>
   <li>西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>

Rendering:

#Now, I don’t need the dots at the front of the list, how should I remove them?

Next, we will introduce several methods to remove the small dots at the front of the list.

1. Write list-style:none in CSS; through this attribute, you can remove the list style

 ul{list-style: none;}

Rendering:

2. Add list-style-type: none to CSS; it is the same as the previous method, but uses different attributes.

ul{list-style-type: none;}

3. Add the list style directly to the li tag. The first two styles are given to remove dots, and the latter two are not given, and they will still be displayed.

<ul>
   <li style="list-style-type: none;">西施</li>
   <li style="list-style-type: none;">王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>

Rendering:

4. Of course, you can also give the label a class name and give the style in CSS. For example, the following code only gives the A li tag style, it naturally does not have the dot in front.

HTML part:

<ul>
   <li class="a1">西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>

CSS part:

.a1{list-style-type: none;}

Rendering:

##Summary: The above introduces CSS How to remove the list style in li, all four methods can be used, it depends on your personal habits. I hope this tutorial on how to remove the dot in front of li can help you!

The above is the detailed content of Can the HTML list style be removed? How to remove the little black spots in front of li. For more information, please follow other related articles on the PHP Chinese website!