完全证明li元素 [英] Full-justify for li elements

问题描述

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

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

| Li1 | Li2 | Li 3 | Li4 |

显然，我可以设置

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

b $ b

要随浏览器更改大小而更改li的大小。然而，我们希望最左边的li的左边缘对齐到左边缘，最右边的li右边缘对齐到右边缘，即使浏览器扩展。

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
|                 |

有没有办法用纯css做这个？

Is there a way to do this with pure css?

推荐答案

使用此解决方案（或这一个）。将该答案转换为列表结果：

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

标记：

<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，您需要在列表项旁边有一个额外的元素。

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

这篇关于完全证明li元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！