2

我一直在自学 CSS，并决定尝试用我目前所掌握的知识制作一个网站。所以我决定做一个固定的导航栏，跟随网络浏览器的位置，我遇到了一个问题。无论出于何种原因，当我更改浏览器窗口大小时，我添加的链接之一不会停留在导航栏中。有人可以看看我的代码吗？请忽略草率，因为我只是第一次尝试。

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

3 回答 3

1

如果您试图制作一个跟随 Web 浏览器位置的固定导航栏，您应该使用%值而不是px值。

检查这个演示

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

希望这是你正在尝试的。

于 2012-09-24T06:07:23.120 回答
1

起初，这似乎是固定元素内部的定位。稍微研究了一下，我想我找到了罪魁祸首......看起来你的问题是'left：950px;' - 这个值不会独立于浏览器，并且会改变结果/弹出具有特定宽度的元素。

Like Libin mentioned, you want to be looking into Fluid Layout design using relational values instead of fixed values. So when you rescale your browser everything is set correctly.

Start looking into Media Queries & the use of relational values such as % and Ems.

Here's a useful resource for converting px values to ems etc: http://pxtoem.com/

Also if you want to go through tutorials / courses on the subject, I've included a couple of links below that have helped me in the past:

Also, - Here's the proof that using absolute & relative won't pop normally inside the fixed nav bar: http://jsfiddle.net/JQT7u/2/

Good Luck!

于 2012-09-24T07:09:24.713 回答
0

检查这个链接

你想要这样吗？

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

顺便说一句，链接出来是因为您提供了内部 div 的position:absolute. 所以链接失去了与主 div 的关系Nav。

如果您想了解更多关于 CSS 定位工作的信息，请点击此链接。

于 2012-09-24T06:07:59.327 回答