Html li 元素的完全对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10020046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full-justify for li elements
提问by Brad Herman
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.
当浏览器改变大小时，让 li 改变大小。然而，我们希望最左边的 li 的左边缘与左边缘对齐，而最右边的 li 的右边缘即使在浏览器扩展时也与右边缘对齐。
Li1 Li2 Li3 Li4
| |
Li1 Li2 Li3 Li4
| |
Li1 Li2 Li3 Li4
| |
Is there a way to do this with pure css?
有没有办法用纯 css 做到这一点？
回答by NGLN
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.
这是一个 IE7+ 解决方案。对于 IE7，您需要一个与列表项相邻的额外元素。
回答by VeroLom
IMHO, the best way is use CSS3 Flexboxes:
恕我直言，最好的方法是使用 CSS3 Flexboxes：
.menu {
display: flex;
justify-content: space-around;
}
回答by rmagnum2002
this is what I get this far.. could be a start for you
这就是我到目前为止所做的..可能是你的一个开始
HTML
HTML
<div id="container">
<ul>
<li class="fisrt">1</li>
</ul>
<ul class="center">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li class="last">5</li>
</ul>
</div>?
CSS
CSS
#container
{
}
li
{float:left;
border:1px solid red;
width:120px;}
.fisrt
{
float:left;
}
.last
{
float:right;
}
.center
{
width:400px;
margin:auto;
}?
回答by Rohit Azad
Hi you define text align justify in you li as like this
嗨，您在 li 中定义文本对齐对齐，就像这样
css
css
ul {width:100%}
ul li {width:25%;
list-style:none;
display:inline-block;
text-align:justify;
margin:2px;
background:yellow;
word-wrap: break-word;
}
HTML
HTML
<ul>
<li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li>
<li>Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere Demo text hrere </li> <li>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</li>
</ul>
?Live demo here http://jsfiddle.net/rohitazad/8UakC/8/
