Css ul li no bullet and remove blank in front of them (div+css)

If you use the ul li tag directly on the web page, there is a small bullet point by default, and there is a blank space in front of each li, especially if the image is included in the li. Why does this happen? ul li is a list tag in html, so there is a bullet point in front of each li by default. The space in front of each li is related to padding and margin, padding is the inner spacing, and margin is the outer margin.

It is not very visualized with only text description. The following will illustrate the method of removing the bullet in front of ul li and the example of listing the blank space in front of li and the method of removing blank space.

I. Css ul li no bullet (Css make li ul bullet points invisible)

Just add the css attribute in the css file or html style tag to remove the bullet in front of ul li, as follows:

Css style of making li ul bullet points invisible:

ul,li{list-style:none;}

If it is written directly in the web page file, it needs to be placed in the style tag. The specific style is as follows:

<style type="text/css">
ul,li{list-style:none;}
</style>

In general, many html tags need to remove bullet points, so write list-style:none to a public css file. All web pages refer to this file, so you don't need to write every web page.

II. Remove the blank space in front of ul li

1. There is the blank space in front of ul li

If you use ul li directly in the web page, there is a blank space in front of each li, as shown in Figure 1:

Figure 1

Code of Figure 1:

<style type="text/css">

.test{list-style:none;overflow:hidden; width:410px; height:200px;border:#f155bc 1px solid;}

</style>

<ul class="test"><li><img src="images/rose.jpg" alt="Remove the blank space in front of ul li" /></li></ul>

2. Remove the blank space in front of ul li

Just add ul,li{padding:0; margin:0;} to css, and the blank space in front of ul li will be removed, namely:

<style type="text/css">
ul,li{list-style:none;padding:0; margin:0;}
.test{overflow:hidden; width:410px; height:200px;border:#f155bc 1px solid;}

</style>

The effect after removing the blank space in front of ul li is shown in Figure 2:

Figure 2