3

基本的に私はナビゲーションバーを作成していますが、JqueryがWebサイトを「きれい」に見せるために多くのサイズ変更を行っているため、水平リストを使用したくないので、各ボタンは次のように作成されます。

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

（はい、それらはすべて正当な理由で画像ボタンです）

しかし、唯一の問題は、それらが修正され、ページの上部で「トップ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; }

Init関数（$（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

修正が必要な要素をコンテナー要素内に配置するだけです (この場合、「top_fixed」という ID を持つ 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 に答える