Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 290537 of list-style-position

  • Revision slug: CSS/list-style-position
  • Revision title: list-style-position
  • Revision id: 290537
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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 {{ cssxref("list-style") }}.

  • {{ Xref_cssinitial() }}: outside
  • Applies to: elements with display:list-item
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

list-style-position:  inside | outside | 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

{{ CSSLiveSample("list-style") }}

  <ul>
    <li>Lorem ipsum <br> dolor sit amet <br> consectetuer</li>
    <li>sed diam nonummy <br> nibh euismod tincidunt <br> ut laoreet</li>
  </ul>

Result

  • Lorem ipsum
    dolor sit amet
    consectetuer
  • sed diam nonummy
    nibh euismod tincidunt
    ut laoreet

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatNo() }} 4.0 3.5 10. (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Firefox does not support list-style-position:inside and hasn't since 2000 (Source)

Specifications

See also

  • {{ Cssxref("list-style") }}、{{ Cssxref("list-style-type") }}、{{ Cssxref("list-style-image") }}

Revision Source

<div>{{ CSSRef() }}</div>
<h2 id="Summary">Summary</h2>

<p><code>list-style-position</code> CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut {{ cssxref("list-style") }}.</p>


<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn>: <code>outside</code></li>
  <li><dfn>Applies to</dfn>: elements with <code>display:list-item</code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn>: yes</li>
  <li><dfn>Media</dfn>: {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn>: as specified</li>
</ul>


<h2 id="Syntax">Syntax</h2>
<pre>list-style-position:  inside | outside | inherit</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    outside</dt>
  <dd>
    The marker box is outside the principal block box.</dd>
  <dt>
    inside</dt>
  <dd>
    The marker box is the first inline box in the principal block box, after which the element's content flows.</dd>
</dl>


<h2 id="Examples">Examples</h2>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>  &lt;ul&gt;
    &lt;li&gt;Lorem ipsum &lt;br&gt; dolor sit amet &lt;br&gt; consectetuer&lt;/li&gt;
    &lt;li&gt;sed diam nonummy &lt;br&gt; nibh euismod tincidunt &lt;br&gt; ut laoreet&lt;/li&gt;
  &lt;/ul&gt;
</pre>
<h3 id="Result">Result</h3>
<ul style="list-style:square;">
  <li>Lorem ipsum<br>
    dolor sit amet<br>
    consectetuer</li>
  <li>sed diam nonummy<br>
    nibh euismod tincidunt<br>
    ut laoreet</li>
</ul>


<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>10. (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Firefox does not support <code>list-style-position:inside</code> and hasn't since 2000 (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=36854" title="https://bugzilla.mozilla.org/show_bug.cgi?id=36854">Source</a>)</p>


<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1 #list-style-position</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-position">CSS 3 Lists #list-style-position</a> Working draft</li>
</ul>

<h2 id="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("list-style") }}、{{ Cssxref("list-style-type") }}、{{ Cssxref("list-style-image") }}</li>
</ul>

<!-- languages({ "es": "es/docs/CSS/list-style-position", "fr": "fr/docs/CSS/list-style-position", "ja": "ja/docs/CSS/list-style-position", "pl": "pl/docs/CSS/list-style-position"}) -->
Revert to this revision