有人必须已经这样做但我没有尝试过包括背景图片甚至是桌子。
我有一个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的底部对齐?