Brad Herman Brad Herman - 1 month ago 18
CSS Question

Full-justify for li elements

We have an adaptive layout where some list elements are displayed horizontally:

| Li1 | Li2 | Li 3 | Li4 |


Obviously I can just set

ul {width:100%}
ul li {width:25%}


To have the li's change size as the browser changes size. However, we want the left edge of the left-most li to align to the left edge with the right-most li right edge aligning to the right edge even as the browser expands.

Li1 Li2 Li3 Li4
| |

Li1 Li2 Li3 Li4
| |

Li1 Li2 Li3 Li4
| |


Is there a way to do this with pure css?

Answer

Use this solution (or this one). Translating that answer to a list results in:

Markup:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

Style sheet:

ul {text-align: justify}
ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}
li {display: inline-block}

This is an IE7+ solution. For IE7 you need an extra element adjacent to the list items.

Comments