我正在学习创建我的第一个网站,我遇到了第一个无法解决的问题。我有一个导航栏,我想在其中很好地坐在一个包裹中,但导航栏位于它下方,我似乎无法正确使用它。
建议会很棒。
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li><a href="#" class="noBorder leftedge">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Challenges</a></li>
<li><a href="#">Progress</a></li>
<li><a href="#" class="rightedge">Forum</a></li>
</ul>
</div>
CSS
.links_container {
width: 1000px;
height: 35px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
}
.nav1 {
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 35px;
width: 130px;
text-align: center;
line-height: 35px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
height: 35px;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
答案 0 :(得分:1)
尝试使用
*{
margin:0;
}
和/或
.nav1 ul {
display: inline;
}
第一个代码将从网页中删除默认浏览器边距,第二个代码将.nav1 ul
显示为内联元素
此外,考虑删除.nav1{float:left;}
是个好主意,因为它不会影响任何内容,并将.links_container
宽度更改为100%而不是1000px。
答案 1 :(得分:0)