Html 如何使固定导航栏延伸到浏览器的宽度？_Html_Css

Html 如何使固定导航栏延伸到浏览器的宽度？

html css

Html 如何使固定导航栏延伸到浏览器的宽度？,html,css,Html,Css,我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口的大小时，导航栏中的链接会移动。我如何使它在调整web浏览器的大小时，链接（主页、服务…）保持固定在右侧，并与内容垂直对齐这是我的html： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> &l

我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口的大小时，导航栏中的链接会移动。我如何使它在调整web浏览器的大小时，链接（主页、服务…）保持固定在右侧，并与内容垂直对齐

这是我的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>

我已经尝试解决这个问题好几个小时了，非常感谢您的帮助

设置导航样式：

left:0;
right:0;

不确定这是否是你要找的

我给了ul一个绝对位置并向右对齐：2%

上边距为5px

移除浮动并将列表显示为内联块

这是一个JSFIDLE-

您可以将实际的

#导航

CSS规则应用于

#固定的#条

div，并为

#导航

提供相同的内容宽度（900px），让浏览器使用自动边距计算边距，并将文本向右对齐，因此

ul

将位于

#导航

的右侧，而您将背景等保留在

#固定#栏

中

请看这里：

这是我修改的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;
}

它不会做出任何改变，你的代码有很多问题。如果屏幕低于900px，会发生什么情况？在任何情况下，如果您使用#navigation作为容器，将900px元素与float:left、text align:right放在其中，并将导航放在其中，则可以创建您要查找的内容。。。

/*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;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#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:3px;
clear:both;
}

#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;
}