如何让固定的导航栏拉伸到浏览器的宽度？答案

【问题标题】：How to make a fixed navigation bar stretch to the width of the browser?如何让固定的导航栏拉伸到浏览器的宽度？
【发布时间】：2014-05-03 15:01:40
【问题描述】：

我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口的大小时，导航栏中的链接会移动。我怎样才能使当您调整网络浏览器的大小时，链接（主页，服务...）保持固定在右侧并与#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;
}

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以将您实际的#navigation CSS 规则应用到您的#fixed_bar div 并给#navigation 相同的内容宽度（900 像素），让浏览器使用自动边距计算边距并将文本向右对齐，因此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;
}

【讨论】：

【解决方案2】：

不确定这是不是你要找的东西

我给 ul 一个绝对位置并向右对齐：2%。
上边距为 5 像素。
删除浮动并将列表显示为内联块

这是一个 jsfiddle - http://jsfiddle.net/rezasan/kE7LK/

/*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;
}

【讨论】：

【解决方案3】：

设置导航样式：

left:0;
right:0;

【讨论】：

它没有做任何改变
好吧，你的代码有很多问题。如果屏幕低于 900 像素会怎样？在任何情况下，如果您使用#navigation 作为容器，在其中放置一个 900px 元素并使用 float:left、text-align:right 并将导航放入其中，则可以创建您要查找的内容...跨度>