Question

我正在尝试创建一个延伸到浏览器宽度的固定水平导航。我遇到的问题是，当我调整浏览器窗口大小时，导航栏中的链接会移动。如何实现这一点，以便在调整Web浏览器大小时，链接（Home，Services ...）保持固定在右侧，并与#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;
}

我一直试图解决这个问题几个小时，非常感谢帮助

Answer 1

您可以将实际的#navigation CSS规则应用于#fixed_bar div，并为#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;
}

Answer 2

设置导航样式：

left:0;
right:0;

Answer 3

不确定这是否是您正在寻找的

我给了ul绝对位置并且右边对齐：2％。
上限为5px。
删除浮动并将列表显示为inline-block

这是一个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 个答案: