我有一个高度为40px的div,和一个行高为28px的ul。我想将ul放置在div内部的底部。我试过使用vertical-align:bottom;,但是没有起作用。
我的另一个想法是使用顶部margin,但如果可以使用vertical-align,我会选择那个方法。
我的演示:http://jsfiddle.net/YpEd7/
我的另一个想法是使用顶部margin,但如果可以使用vertical-align,我会选择那个方法。
我的演示:http://jsfiddle.net/YpEd7/
在容器中添加行高。一旦您在容器上设置了40像素的行高,垂直对齐底部将与底部对齐,因为您的容器也是40像素高。之前它不起作用是因为容器的行高小于40像素,所以ul会对齐到默认行高的底部。
#container {
background:gray;
height:40px;
line-height: 40px;
}
我在上面的评论中发布了相同的内容^
#container {
background:gray;
height:40px;
position: relative;
}
ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 0px;
}
#container {
background:gray;
height:40px;
line-height:40px;/* equal to height of container */
}
ul {
margin:0;
padding:0;
list-style:none;
vertical-align:bottom;/* fine since i'm inline-block */
display:inline-block;
line-height:1em;
}
ul li {
line-height:28px;
background:red;
color:#fff;
margin:0 20px 0 0;
float:left;
}
.VAlignHelper:after {
content:'';
font-size:0;
height:100%;
vertical-align:middle;
display:inline-block;
}
<div id="container" class="VAlignHelper">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
margin:12px 0 0 0;
这样写不行吗? - Aravona