我有一个带有图像和 ul 的导航栏。我想在 ul 中输入文本以对齐到 div 的底部,但它现在位于顶部。我怎样才能做到这一点?
http://jsbin.com/otitaf/1/
<nav>
<div class="logo">
<img src="img/logo.jpg" id="logo">
</div>
<div class="nav">
<ul>
<li class="bottom">
<a href="home.html">Luigi's ♨ Pizzeria</a>
</li>
<li>
<a href="menu.html">Menu</a>
</li>
<li class="bottom">
<a href="#">Map</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Praises</a>
</li>
</ul>
</div>
</nav>
CSS
.logo{
width: 30%;
float: left;
}
.nav{
float: right;
}
#logo{
height: 100%;
margin-left: 25%;
}
.bottom{
position: relative;
vertical-align: bottom;
}
最佳答案
使用下面的css来实现你的梦想
#side-bar{ position:relative; }
#side-bar ul{position: absolute; bottom: 0;} /* this will apply to all ul available in side-bar
insted这个,你也可以添加类或id到ul来具体选择它,比如:
.sidebar-ul{position: absolute; bottom: 0;}
关于html - 使用CSS将文本底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15146179/