Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.