Question

我一直在教自己CSS，并决定尝试用我迄今为止的知识创建一个网站。所以我决定制作一个遵循Web浏览器位置的固定导航栏，然后我遇到了一个问题。无论出于何种原因，当我更改浏览器窗口大小时，我添加的其中一个链接不会留在导航栏中。有人可以查看我的代码吗？请忽略邋,,因为我只是第一次尝试这个。

这是我的HTML。 “secondnavlinks”div id是不会留在导航栏中的那个：

<div id="nav">

<div id="secondnavlinks">
<ul>
<li><a href="#">Ambient Bookmarklet</a></li>
</ul>
</div>


<div id="class1">
<ul>
<li><a href="#">Saved</a></li>
<li><a href="#">Folders</a></li>
</ul>
</div>

<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>



</div>

这是CSS：

#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}

（跳过“class1”div）

#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}



#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}

#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}

Answer 1

如果您尝试制作一个遵循网络浏览器位置的固定导航栏，则应使用%值而不是px值。

Check this demo

在那个演示中，我将值更改为％，删除了一些绝对位置等。

希望这是你正在尝试的。

Answer 2

首先，这似乎可能是固定元件内部的定位。仔细研究一下后，我想我已经找到了罪魁祸首......好像你的问题是'左：950px;' - 此值不会与浏览器无关，并且会改变结果/弹出具有特定宽度的元素。

与 Libin 一样，您希望使用关系值而不是固定值来研究流体布局设计。因此，当您重新缩放浏览器时，一切都设置正确。

开始研究Media Queries＆amp;使用关系值，如％和Ems。

这是将px值转换为ems等的有用资源：http://pxtoem.com/

此外，如果您想要阅读有关该主题的教程/课程，我在下面提供了一些帮助我的链接：

此外， - 这是使用绝对和＆amp;相对不会在固定导航栏中正常弹出：http://jsfiddle.net/JQT7u/2/

祝你好运！

Answer 3

检查此link

你想这样吗？

从您的问题中不清楚设计应该如何。

顺便说一句，链接出来是因为你给了内部div position:absolute。因此，链接与主要的div Nav失去了联系。

如果您想了解更多关于在CSS中进行定位的工作，请仔细阅读link。

CSS导航绝对/固定定位问题？

3 个答案: