如何将图像放在导航栏上,就像这样在线预订?我需要CSS。 https://www.dropbox.com/s/md2teu0ol82o23x/Website.psd
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Fleet</a></li>
<li><a href="#">Booking</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" id="book_online"></a></li>
</ul>
</div>
.navbar .nav > li > #book_online {
background: url(../blabor2.jpg) no-repeat;
width: 183px;
height: 64px;
text-indent: -99999px;
position: absolute;
}
答案 0 :(得分:3)
你必须定义与li相对的绝对#book_position。
希望这能解决你的问题...
.nav>li{
position:relative;
}
#book_online{
position:absolute;
z-index:10;
display:block;
background: url(../blabor2.jpg) no-repeat;
width: 183px;
height: 64px;
}
答案 1 :(得分:0)
这是一个非常小的“CSS”代码,我只能猜测
a .navbar .nav > li > #book_online {
display: block; /* this is new */
background: url(../blabor2.jpg) no-repeat;
width: 183px;
height: 64px;
text-indent: -99999px;
/*position: absolute;*//* may be you don't need this */
}