ナビゲーションメニューは、私は各ボタンに2つのイメージを持つことになりますナビゲーションメニューを構築

Question

上ボタンマウスでアニメーションをフェードアウト。 Jqueryの部分はソートされていて問題にはなりません。各アンカーには2つのスパンがあり、1つしか表示されません。

<div> 
    <a href="#"> 
     <span id="span1">Button1</span> 
     <span id="span2">Button1</span> 
    </a> 
    <a href="#">    
     <span id="span3">Button2</span> 
     <span id="span4">Button2</span> 
    </a> 
</div> 

私の問題は、CSSである：以下のとおりであると

HTMLは、私が先に行くことにしました。私はButton1がButton2の左側にあるように、適切にボタンをスタイルすることができません。現在、2つのボタンはすべて同じスペース（別のボタン）に表示され、最後のボタンは表示されます。ここで

は私のCSSです：

#span1 { background-image:url('button1.png'); } 
    #span2 { background-image:url('button1H.png'); } 
    #span3 { background-image:url('button2.png'); } 
    #span4 { background-image:url('button2H.png'); } 

    span 
    { 
     background-repeat:no-repeat;     
     position:absolute; 
     width:100px; 
     height:50px; 
     text-indent:-9000px; 
     position: 0 0; 
    } 

    a 
    { 
     width:150px; 
     float:left; 
    } 

私は、任意のCSSのコンテナ足りませんか？ 私のポイントは、各ボタンを150ピクセル長くすることです。 ボタン1の長さを150px、ボタン2を同じ行にしたいとします。

ありがとうございました！

Answer 1

1. あなたはすべてのスパンでposition：absoluteを使用しています。このスパンはx軸とy軸に0度の位置に配置されています。それらのために異なったleftの位置を設定してください。
2. ディスプレイを使用します：スパンのブロックで、高さと幅を使用します。

これを使用してみてください：

#span1 { background-image:url('button1.png'); } 
#span2 { background-image:url('button1H.png'); } 
#span3 { background-image:url('button2.png'); left: 300px;} 
#span4 { background-image:url('button2H.png'); left: 300px;} 

span{ 
    background-repeat:no-repeat; 
    position:absolute; 
    width:100px; 
    height:50px; 
    position: 0 0; 
    display: block; 
    text-indent:-9000px; 
} 

はここでそれを参照してください。http://jsfiddle.net/SebastianPataneMasuelli/L5guL/1/

また、あなたが位置捨てることができます：絶対に、第二スパンを操作し、それを相対的な位置を与え、それを動かします左に。これにより、要素を浮動させ、絶対的な左の配置を避けることができます。これにより、より多くのリンクがあるほど不快になる可能性があります。 例：http://jsfiddle.net/SebastianPataneMasuelli/L5guL/4/