3

基本上我正在制作一个导航栏，并且由于 Jquery 做了很多调整大小以使网站看起来“漂亮”，我不想使用水平列表，所以每个按钮都是这样创建的：

<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>

（是的，它们都是图像按钮，有充分的理由）

但唯一的问题是它们已固定并在页面顶部设置为“top 0”，因此不能彼此相邻而是重叠，任何关于我如何仍然保持位置固定的想法和他们从最高到 0 却让他们彼此相邻？

HTML

<div id="top">
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
</div>

CSS

#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }

初始化函数（在 $(document).ready() 上运行）

$('a.button').animate({
    height: '+=5px',
    }, 20, function() {
$('a.button').animate({
    opacity: 0.6,
    height: '-=5px',
}, 20);
});

谢谢

4

2 回答 2

3

将它们全部放在一个容器中，即id="header"，给出标题position:fixed;top:0;etc...

然后，对于每个链接/按钮，给他们：

position:relative;display:inline-block;float:left;

如果您希望它们居中，则在#header使用中并从链接text-align:center;中删除float:left

所以容器是固定的，但里面的按钮是相对的，不会重叠。

希望这可以帮助！

非常粗略的例子

http://jsfiddle.net/6SCTZ/

<div id="header">
   <div class="button">button1</div>
   <div class="button">button2</div>
   <div class="button">button3</div>
</div>

CSS：

#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }

.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
于 2012-09-25T23:29:16.487 回答
1

只需将需要修复的任何元素放入容器元素中（在这种情况下，我将使用 ID 为“top_fixed”的 div）。

考虑以下 html：

<div id='top_fixed'>
  <a href='http://google.com'>Google</a>
  <a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>

现在，下面的 CSS：

a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}

​</p>

演示：http: //jsfiddle.net/mHKNc/1/

于 2012-09-25T23:24:58.463 回答