我正在尝试使用包含div来对齐底部图像的3个标签项(使用ul flexbox项目) ,但对于我的生活,我无法得到它们所有留在包含div。
如果我使用position:absolute; bottom:0;
它会使一切变得更糟,所以我有点卡住了解决它的方法!我还在margin-top:auto
上尝试了<li>
,但这也无济于事。
这是JSFiddle:link或直接代码:
<div class="container">
<img src="http://via.placeholder.com/400x400">
<ul class=flextabs>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>
</div>
.container {
width: 400px;
height: 400px;
background: blue;
text-align: center;
border:solid;
}
ul.flextabs {
margin:0;
padding:0;
list-style:none;
display:flex;
}
li {
display:flex;
flex-direction:column;
flex: 1 0 auto;
border:1px solid #000;
}
a {
text-decoration:none;
color:#000;
background:red;
padding:5px;
}
a:hover{background:orange;}
这是目前的结果:
vs我想要实现的目标(上图编辑)
答案 0 :(得分:1)
我会在position: absolute;
上使用ul
将其放置在容器的底部,并将flex
应用于它 - 而不是应用于容器或li
秒。我也改变并添加了一些其他细节:
.container {
width: 400px;
height: 400px;
background: blue;
text-align: center;
border: 2px solid black;
position: relative;
}
ul.flextabs {
position: absolute;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
li {
display: inline-block;
width: 33.33%;
border: 1px solid #000;
}
a {
text-decoration: none;
color: #000;
background: red;
padding: 5px;
display: block;
}
a:hover {
background: orange;
}
<div class="container">
<img src="http://via.placeholder.com/400x400">
<ul class=flextabs>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>
</div>