当我改变我的屏幕分辨率时,我的网页主导航底部边框神奇地缩小了我网页长度的一半,而不是随着网页的流动。我该如何解决这个问题?CSS如下。
#main-nav {
width: 100%;
background: black;
font-weight: bold;
border-bottom: 5px solid blue;
float: right;
margin: 0px;
padding: 0px;
}
#main-nav ul {
width: 1024px;
margin: 0px auto;
text-align: right;
padding: 0px;
list-style-type: none;
}
#main-nav li{
float: right;
margin-left: 1px;
padding: 0px;
}
#main-nav a {
text-align: center;
color: #fff;
text-decoration: none;
padding: 10px 15px;
background: blue;
float: left;
}
#main-nav a.active, #main-nav a:hover {
background-color: #467AFE;
color: #fff;
}
这是HTML:
<div id="main-nav">
<ul>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="" class="active">Link</a></li>
</ul>
</div>