当我更改屏幕分辨率时,我的网页主导航底部边框神奇地缩小了我网页长度的一半,而不是随着网页的流动而变化。我该如何解决这个问题? 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>
最佳答案
如果没有指向相关网页的链接,几乎不可能分辨出来,但是:
width: 50%;
在 .beta 中看起来很可疑。 Beta 在做什么?
关于css - 网页边框和屏幕分辨率问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1183692/