Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Summary
The list-style-position CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut list-style.
- Initial value
outside - Applies to list items
- Inherited yes
- Media
visual - Computed value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: inside | outside
list-style-position: inside list-style-position: outside list-style-position: inherit
Values
-
outside - The marker box is outside the principal block box.
-
inside - The marker box is the first inline box in the principal block box, after which the element's content flows.
Examples
.one {
list-style:url(starsolid.gif) inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url(starsolid.gif);
list-style-position: none;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Lists and Counters Module Level 3 | Working Draft | No change. |
| CSS Level 2 (Revision 1) | Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.