我有一个包含 div 的列表
<ul>
<li>
<div class="date">today</div>
<div class="desc">lorem ipsum</div>
<div class="action">
<p>
<a class="button">X</a>
</p>
</div>
</li>
<li>....</li>
<li>....</li>
</ul>
如何垂直对齐 div.action 中的 a.button?
该列表的 CSS 是使用 Susy 生成的,CSS 看起来像这样:
ul {
list-style: none outside none;
}
li {
margin-left: 12.766%;
margin-right: 12.766%;
margin-bottom: 10px;
background-color: #eee;
display: block;
}
li:after {
clear: both;
content: "";
display: table;
}
.date {
float: left;
margin-right: 2.12766%;
width: 10.6383%;
}
.desc {
float: left;
margin-right: 2.12766%;
width: 74.4681%;
}
.action {
float: right;
text-align: center;
margin-right: 0;
width: 10.6383%;
}
我不知道 LI 高度,因为“desc”文本可以是任意长度。
这是 codepen.io 上的代码 -> http://codepen.io/anon/pen/CFhos
最佳答案
Flexbox 几乎可以对齐任何东西——甚至是 float 元素...
只需将以下规则添加到 li
中:
display: flex;
align-items: center; /*align vertical */
关于html - 垂直对齐位于 LI 内的 float DIV 内的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26095321/