In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > list-style-position

list-style-position property

Browser support:

Specifies whether the list marker for a list item should appear inside or outside the list-item box.

JavaScript page for this property: listStylePosition. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

inside

List-marker is inside the text, and wrapped text content will be rendered at an indentation level similar to the marker.

outside

Default. The list-marker will be rendered before any text content.

Default: outside.

Example HTML code 1:

This example illustrates the use of the list-style-position property:

<body>
    <ol style="list-style-position: inside;">
        <li>inside
        <li>list
        <li>position
    </ol>

    <ol style="list-style-position: outside;">
        <li>outside
        <li>list
        <li>position
    </ol>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

li, menu, ol, ul

list-style
list-style-image
list-style-type
content
counter-increment
counter-reset

External links:

list-style-position (MSDN)
list-style-position (Mozilla Developer Center)
list-style-position (Safari Reference Library)
list-style-position (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

list-style-position property

Possible values:

Example HTML code 1:

Supported by tags:

Related pages:

External links:

Post Content