How to use the list-style-position attribute in css

This article is about how to use the list-style-position attribute 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.

Definition and usage of csslist-style-position attribute

In css, the list-style-position attribute is used to set where to place the list item tag, to declare the position of the list flag relative to the contents of the list item, the outside flag is placed at a distance from the border boundary of the list item, but this distance is not defined in CSS, and the inside flag is treated as if they were inline elements inserted at the front of the list item content.

The list-style-position attribute is supported by all browsers, but the attribute value "inherit" is not supported by any version of InternetExplorer (including IE8).

If you need to set multiple list properties at the same time, you can use the list-style property, and the list-style attribute can also set the list-style-type (type of list item tag), list-style-position (where to place the list item tag), and list-style-image (image to replace the list item tag) attribute in a single declaration.

Csslist-style-position attribute syntax format

Css syntax: list-style-position:inside/outside/inherit

JavaScript syntax: object.style.listStylePosition= "inside"

Attribute value description

Inside: the list item tag is placed within the text, and the surrounding text is aligned according to the tag

Outside: default value, keeping the tag on the left side of the text, the list item tag outside the text, and the surrounding text not aligned according to the tag

Inherit: inherits the value of the list-style-position attribute from the parent element

Case study

Csslist-style-position attribute notes

.inside {list-style-position:inside}

.outside {list-style-position:outside}

"inside":

Html

Css

JavaScript

"outside":

Html

Css

JavaScript

Thank you for reading! This is the end of this article on "how to use the list-style-position attribute 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 for more people to see!