完全合理的li元素

Question

我们有一个自适应布局,其中一些列表元素水平显示:

| Li1 | Li2 | Li 3 | Li4 |

显然我可以设置

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

随着浏览器更改大小而获得li的更改大小.但是,我们希望最左边的li的左边缘与左边缘对齐,最右边的li右边缘与右边缘对齐,即使浏览器展开也是如此.

Li1    Li2    Li3     Li4
|                       |

Li1      Li2      Li3       Li4
|                             |

Li1  Li2  Li3   Li4
|                 |

有没有办法用纯css做到这一点？

Answer 1

使用该解决方案(或这个).将该答案翻译成列表会导致:

标记:

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

样式表:

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

这是一个IE7 +解决方案.对于IE7,您需要在列表项旁边添加一个额外元素.