Try this: http://jsfiddle.net/QzYAr/
- For details on
display: table-cell
: Is there a disadvantage of using `display:table-cell`on divs? table-layout: fixed
ensures equal widthli
elements.
CSS:
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>