How to remove dots from html li

html Methods to remove dots from li: 1. Use the "list-style:none" method; 2. Remove by "list-style-type:none"; 3. Add the list style directly to the li tag; 4. Remove through ".a1{list-style-type:none;}".

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

html liRemove black spots

In work, we often use lists. Lists are divided into ordered lists and unordered lists. Unordered lists are Solid dots will be displayed on the page, and serial numbers will be displayed in the ordered list. However, sometimes we don't want it and think it is redundant. We don't need the dots and serial numbers in front of the list to be displayed. Can we 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 to see what the effect would be if the list style was 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? Woolen cloth?

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 in 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 style it in CSS, such as The following code only styles the first li tag, which naturally does not have the preceding dot.

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 how to remove list styles in CSS, four methods You can use them all, it depends on your personal habits. I hope this tutorial on how to remove the dots in front of li can help you!

【Recommended learning: css video tutorial】

The above is the detailed content of How to remove dots from html li. For more information, please follow other related articles on the PHP Chinese website!