How to control the style of ul and li in CSS
This article is about how to control the style of ul and li in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The code is as follows:
Home page
Blog
Design
Photo album
Forum
About
CSS:
The code is as follows:
# menuul {list-style:none;margin:0px;}
# menuulli {float:left;}
Explain:
# menuul {list-style:none;margin:0px;}
List-style:none, this sentence is to cancel the front point of the list, because we don't need these points.
Margin:0px, this sentence removes the indentation of UL so that all the contents of the list are not indented.
# menuulli {float:left;}
The left and right side of the float:left here is to make the content appear on the same line, so the floating attribute (float) is used.
Detailed explanation of ul and li style in CSS
Ul and li lists are common elements when using CSS to layout pages. In CSS, there are attributes that specifically control the presentation of the list, such as the list-style-type attribute, the list-style-image attribute, the list-style-position attribute, and the list-style attribute.
1. List-style-type attribute
The list-style-type attribute is used to define the bullets of the li list, that is, the decorations in front of the list. The list-style-type property is an inheritable property. Its grammatical structure is as follows: (list some commonly used attribute values)
List-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
There are many attribute values for the list-style-type attribute, and here we just list a few of the more commonly used ones.
None: no bullets are used. Disc: solid circle. Circle: hollow circle. Square: solid cube. Demical: Arabic numerals. Lower-alpha: lowercase letters. Upper-alpha: capital letters. Lower-roman: lowercase Roman numerals. Upper-roman: uppercase Roman numerals.
The sample code that uses the list-style-type property is as follows:
Li {list-style-type:square;}
Here is the contents of the list
Here is the contents of the list
Here is the contents of the list
II. List-style-image attribute
The list-style-image property is used to define the use of pictures instead of bullets. It is also an inheritable attribute and its syntax structure is as follows:
List-style-image:none/url
The list-style-image property can take two values:
None: there are no replacement images. Url: the path to replace the picture.
Let's look at a piece of code:
Li {list-style-image:url (images/bg03.gif);}
Here is the contents of the list
Here is the contents of the list
Here is the contents of the list
III. List-style-position attribute
The list-style-position attribute is an attribute that defines where bullets are displayed in the list. It is also an inheritable attribute with the following syntax structure:
List-style-position:inside/outside
Inside: bullets are placed within the text. Outside: bullets are placed outside the text.
Examples of using the list-style-position property are as follows:
Li {
List-style-type:square
List-style-position:outside;}
Here is an example of using the list-style-position attribute with a value of outside. Please note the position of the bullet after the line break.
Here is the contents of the list
Here is the contents of the list
Let's take a look at the style with the attribute value of inside.
Li {
List-style-type:square
List-style-position:inside;}
Here is an example of using the list-style-position attribute with a value of inside. Please note the position of the bullet after the line break.
Here is the contents of the list
Here is the contents of the list
IV. List-style attribute
The list-style attribute is not only a property that comprehensively sets the li style, but also an inheritable attribute. The syntax structure is as follows:
Li-style:list-style-type/list-style-image/list-style-position
The positions of each value can be exchanged. For example:
Li {
List-style:url (images/bg03.gif) inside;}
Here is an example of using the list-style property. Please note the position of the bullet after the line break.
Here is the contents of the list
Thank you for reading! This is the end of this article on "how to control the style of ul and li in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!
