我们有一个自适应布局,其中一些列表元素水平显示:
| 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进行此操作?
答案 0 :(得分:17)
使用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,您需要在列表项旁边添加一个额外的元素。
答案 1 :(得分:1)
恕我直言,最好的方法是使用CSS3 Flexboxes:
.menu {
display: flex;
justify-content: space-around;
}
答案 2 :(得分:0)
这就是我到目前为止......可能是你的开始
<强> 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 强>
#container
{
}
li
{float:left;
border:1px solid red;
width:120px;}
.fisrt
{
float:left;
}
.last
{
float:right;
}
.center
{
width:400px;
margin:auto;
}
答案 3 :(得分:0)
您好,您可以像这样定义文本对齐方式
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
<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>