Brad Herman Brad Herman - 1 year ago 102
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 Source

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



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.