Test display: inline-block

by drublic

HTML

<ul class="display">
    <li>This is a test with <code>display: list-item</code></li>
    <li>Another list-item</li>
</ul>

<ul class="no-display">
    <li>This is a test without <code>display</code>-property</li>
    <li>Another list-item</li>
</ul>

<h3>Results</h3>
<dl>
    <dt>Chrome 16</dt>
    <dd>No difference</dd>

    <dt>Firefox 10</dt>
    <dd>No difference</dd>

    <dt>Opera 12</dt>
    <dd>No difference</dd>

    <dt>Internet Explorer 9</dt>
    <dd>No difference</dd>

    <dt>Internet Explorer 8</dt>
    <dd>No difference</dd>

    <dt>Internet Explorer 7</dt>
    <dd>No difference</dd>
</dl>

CSS

/**
 * Test-Case for display: list-item
 */

.display {
    display: list-item;
}


ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
dd { margin: 0 0 0 40px; }