我制作了一个导航栏,它可以按我的意愿运行,唯一的问题是,该导航栏位于我的黑色标题的顶部,而我希望将其放在标题的底部。我该如何解决?
我的代码(html):
<div id="navBarTop">
<ul>
<li><a href="test">Test</a></li>
<li><a href="test">Test</a></li>
<li><a href="test">Test</a></li>
<li><a href="test">Test</a></li>
</ul>
</div>
我的代码(css):
#navBarTop {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
在父div上使用相对位置,在导航div上使用绝对底部为0的位置。
结帐小提琴以获得解决方案:http : //jsfiddle.net/pctdwz1f/ `
.header{
background:#000;
height:250px;
position:relative;
}
#navBarTop {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position:absolute;
bottom:0;
}`
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句