Question

基本上我试图在topNav div中制作导航栏，其中网站横幅设置为背景，所以我需要我的导航栏才能进入div的底部。我已经找到了一种方法来做到这一点，但我看到的所有内容都包含了div的位置：relative和带有UL位置的div：绝对;底部：0像素;左：0像素;.但是发生的事情是我的所有链接都被堆积起来了。这是我目前的代码

CSS

.topNav{
    background-image:url(includes/media/banners/hwarang_banner.gif);
    backface-visibility:visible;
    height:135px;
    width:100%;
    background-size:50%;
    background-repeat:no-repeat;
    position:relative;
}
.topNav ul{
    position:relative;
}
.topNav li{
    position:absolute;
    bottom:0px;
    left:0px;
    display:inline;
}

HTML

<div class="topNav">
<a href="#login" id="login">Login</a>
<span style="color:rgba(238,255,0,1.00); bottom:0; right:0; position:absolute">Alpha Version 0..3</span>
<ul class="topNav">
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#calendar"><span>Calendar</span></a></li>
  <li><a href="#classes"><span>Your Classes</span></a></li>
  <li><a href="#event"><span>Event</span></a></li>
  <li><a href="#insurance"><span>Insurance</span></a></li>
  <li><a href="#purchase"><span>Purchase</span></a></li>
  <li><a href="#family"><span>Family</span></a></li>
</ul></div>

先谢谢

尝试使用Inline UL制作导航栏

0 个答案: