Question

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 1

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.