我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口的大小时，导航栏中的链接会移动。我如何才能做到这一点，以便在调整Web浏览器的大小时，链接（“主页”，“服务” ...）保持固定在右侧并与#content垂直垂直。
这是我的html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Services">Services</a></li>
<li><a href="About">About</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
而我的CSS：
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
我已经尝试解决了几个小时，将不胜感激
您可以将您的实际#navigationCSS规则，你的#fixed_barDIV，给#navigation内容（900px）的宽度相同，让浏览器计算与自动利润率利润率和对齐文本的权利，所以ul将在右边#navigation，而你保持背景等#fixed_bar。
在这里查看：http : //jsbin.com/bibulewa/1
这是我修改过的CSS：
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句