How to remove the dot in front of li in css

In CSS, you can use the list-style attribute to clear the dots in front of li. You only need to set the "list-style:none" style to the li tag. The list-style attribute is used to control the marking of li list items. When the value is none, the project mark in front of li can be cleared.

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

When many people use divs to build websites, they always use li, but there is always a small black dot in front of the display effect. This gives many people a headache, but they The source cannot be found, otherwise we can use the following methods to clear it.

1. Write code in CSS. Find the relevant CSS, in . Under .li and .ul write list-sytle:none;Of course some will write like thislist-style-type :none, this writing method is the most common especially in some CMS.

2. Find the head part of the relevant page and write the following code

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

3. Add list-style to li and ul.

<ul style="list-style-type:none>
    <li>
    <a herf="http://123.COM">我的博客</a>
    </li>
< /ul>

Of course this is very troublesome.

The simplest one is the first one, which is controlled through CSS. This will of course have good effects.

These methods are all set by setting list-style:none. Some will use list-style-type. Let’s take a look. its properties.

• none: Do not use bullets

• disc: Filled circle, default value circleHollow circle

• square：Solid square

• decimal：Arabic numeral

• lower-roman : Lowercase Roman numerals

• upper-roman: Uppercase Roman numerals

• ##lower-alpha Lowercase English letters

• upper-alpha: Uppercase English letters

These can be used to replace none above, and there will be a corresponding correspondence for whatever you want.

A), use CSS to format the list symbol:

ul li{
list-style-type:none;
}

B), if you want to replace the list symbol with an image, then:

ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}

C), for the left For alignment, you can use the following code:

ul{
list-style-type:none;
margin:0px;
}

D). If you want to add a background color to the list, you can use the following code:

ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

Recommended learning:

css video tutorial

The above is the detailed content of How to remove the dot in front of li in css. For more information, please follow other related articles on the PHP Chinese website!