如何向右拉伸(stretch)最后一项,并将过滤器图标与页面右端对齐?
灰色背景需要向右拉伸(stretch)
如何在
flex
中将图标垂直居中对齐?align-items:center;
导致li
的高度塌陷。
body{
background: url(http://i.imgur.com/ilgJJ1Q.gif);
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
height: 80px;
}
li{
padding: 10px;
text-align: center;
min-width: 80px;
}
li:last-child{
background: rgba(38, 46, 54, .6);
}
.c2{ background: #a15796; }
.c3{ background: #b48c4d; }
.c4{ background: #3a7d7d; }
<ul>
<li class="c1"><img src="http://i.imgur.com/SRVh4os.png" alt=""></li>
<li class="c2"><img src="http://i.imgur.com/rBM2CYr.png" alt=""></li>
<li class="c3"><img src="http://i.imgur.com/9dFFuH5.png" alt=""></li>
<li class="c4"><img src="http://i.imgur.com/7bQ73kd.png" alt=""></li>
<li class="c1"><img src="http://i.imgur.com/yJ4vKBG.png" alt=""></li>
</ul>
https://jsfiddle.net/afelixj/79pybrh9/
实际页面有文本也有图标
最佳答案
由于您在 ul
上设置了固定高度,您可以使用 line-height
进行垂直对齐。此外,您只需将 flex: 1
添加到 li:last-child
以占用剩余空间。
代替 line-height
你也可以在每个 li
上使用 display: flex
然后用 align- 居中它的内容items: center
和 justify-content: center
Fiddle
body{
background: url(http://i.imgur.com/ilgJJ1Q.gif);
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
height: 80px;
}
li{
padding: 10px;
text-align: center;
min-width: 80px;
line-height: 80px;
}
li:last-child{
background: rgba(38, 46, 54, .6);
flex: 1;
}
.c2{ background: #a15796; }
.c3{ background: #b48c4d; }
.c4{ background: #3a7d7d; }
<ul>
<li class="c1"><img src="http://i.imgur.com/SRVh4os.png" alt=""></li>
<li class="c2"><img src="http://i.imgur.com/rBM2CYr.png" alt=""></li>
<li class="c3"><img src="http://i.imgur.com/9dFFuH5.png" alt=""></li>
<li class="c4"><img src="http://i.imgur.com/7bQ73kd.png" alt=""></li>
<li class="c1"><img src="http://i.imgur.com/yJ4vKBG.png" alt=""></li>
</ul>
关于css - flex - 最后一项右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36116630/