list-style-position

Article
10/10/2017

Sets a variable that indicates how the list-item marker is drawn relative to the content of the object.

Syntax

{ list-style-position: sPosition }

Possible values

sPosition

String that specifies one of the following values:

outside	Default. Marker is placed outside the text, and any wrapping text is not aligned under the marker.
inside	Marker is placed inside the text, and any wrapping text is aligned under the marker.

The property has a default value of outside. The cascading style sheet property is inherited.

Remarks

The list-style-position property can be applied to any element when margin and display:list-item are applied.

If the left margin of a list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.

Examples

The following example uses the list-style-position property to set the position for markers. This example uses the ul and ul.compact elements as selectors in an embedded (global) style sheet to set the position of the list-item markers:

<style>
    ul {list-style-position:inside}
    ul.compact {list-style-position:outside}
</style>
</head>
<body>
<ul>
    <li>... 
    <li>... 
</ul>
<ul class=compact>
    <li>... 
    <li>...
</ul>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371229.xtlink_newWindow(en-us,Expression.40).png .

Applies to

li, ol, ul