[英]Vertically align image next to inline ul navigation bar
一定有人已经这样做了,但是我没有尝试过包括背景图像甚至表格在内的工作。
我有一个960像素宽的包装器,当前我已在代码中将标题显示在ul导航栏的同一行:
____________________________________________________________
! h2 text ! menu1 ! menu 2 ! menu3 !
____________________________________________________________
我想用比当前文本行高的徽标替换h2文本,并将所有内容都排列在底部,如下所示:
___________________________
! !
! LOGO.jpg !
! !________________________________
! ! menu1 ! menu 2 ! menu3 !
____________________________________________________________
在尝试了背景图片,表格以及我能想到的所有其他内容之后,我能做的最好的事情就是,徽标的顶部与菜单栏的顶部如此排列。
____________________________________________________________
! ! menu1 ! menu 2 ! menu3 !
! LOGO.jpg !_______________________________!
! !
! !
___________________________!
目前,我有此代码:
#header {
position: relative;
display: block;
background-color: #003366;
}
#header ul {
position: absolute;
right: 0px;
top: 2px;
}
#header ul li {
list-style: none;
display: inline;
}
img.bottom
{
vertical-align:text-bottom;
}
和
<div id="header">
<img src="src/logo.jpg" width="414" height="140" class="bottom" />
<div id="navbar">
<ul>
<li><a href="menu1.htm"><span>Home</span></a></li>
<li><a href="menu2.htm"><span>About</span></a></li>
<li><a href="menu3.htm"><span>Contact</span></a></li>
</ul>
</div>
</div>
有没有简单的方法可以将菜单向下移动,使其与jpg的底部对齐?
您可以将标头的高度设置为自动,并将ul定位在底部。 这是一个jsfiddle: http : //jsfiddle.net/YBrkB/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.