Html 将导航栏放在标题的底部
我已经做了一个导航栏,它的功能正如我所希望的,唯一的问题是,该栏被放置在我的黑色标题的顶部,我希望它被放置在标题的底部。我该如何解决这个问题 我的代码(html):Html 将导航栏放在标题的底部,html,css,replace,header,navigation,Html,Css,Replace,Header,Navigation,我已经做了一个导航栏,它的功能正如我所希望的,唯一的问题是,该栏被放置在我的黑色标题的顶部,我希望它被放置在标题的底部。我该如何解决这个问题 我的代码(html): 在父div上使用相对位置,在导航div上使用底部为0的绝对位置 解决方案的签出小提琴:` 唯一的问题是底部仍然有一个黑色边框,它必须一直位于底部。这是因为navigation div上的底部边距。我更新了fiddle: <div id="navBarTop"> <ul>
在父div上使用相对位置,在导航div上使用底部为0的绝对位置 解决方案的签出小提琴:`
唯一的问题是底部仍然有一个黑色边框,它必须一直位于底部。这是因为navigation div上的底部边距。我更新了fiddle:
<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>
#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;
}
.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;
}`