<分区>
我们有一个自适应布局，其中一些列表元素水平显示:
| 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 做到这一点？
最佳答案
使用this solution (或 this one )。将该答案翻译成列表会导致:
标记:
<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，您需要在列表项旁边添加一个额外的元素。
关于html - li 元素的完全对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10020046/