Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

list-style-position property

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

CSS 2.1, Section 5.6.5

Syntax

list-style-position: inside | outside

Property 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.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Standards information

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 examples use the list-style-position attribute and the list-style-position property to set the position for markers.

This example uses ul and UL.compact as selectors in an embedded (global) style sheet to set the position of the list-item markers.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style-position.htm


<!DOCTYPE html>
<html>
<head>
  <title>list-style-position</title>
  <style>
    ul {
      list-style-position: inside;
    }

    .compact {
      list-style-position: outside;
    }
  </style>
</head>

<body>
  <p>The top list has <strong>list-style-position</strong> set to "inside"; the bottom list to "outside".</p>
  <ul>
    <li>first list item comes first</li>
    <li>second list item comes second</li>
  </ul>
  <ul class="compact">
    <li>first list item comes first</li>
    <li>second list item comes second</li>
  </ul>
</body>
</html>

This example uses inline scripting to change the marker position when an onmouseover event occurs.


<!DOCTYPE html>
<html>
<head>
  <title>listStylePosition</title>
</head>

<body>
  <p>
    Run your mouse over the unordered lists (<strong>UL</strong>) to see the 
    <strong>listStylePosition</strong> property set to "inside".
    The <strong>mouseout</strong> sets the property to "outside".
  </p>

  <!-- IN-LINE SCRIPTING -->
  <div onmouseover="this.style.listStylePosition='inside'"
    onmouseout="this.style.listStylePosition='outside'">
    <ul>
      <li>first list item comes first</li>
      <li>second list item comes second</li>
    </ul>
    <ul>
      <li>first list item comes first</li>
      <li>second list item comes second</li>
    </ul>
  </div>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show:
© 2014 Microsoft