画像を並べる方法

Question

私はこれらの2つの「ハイパーリンク」アイコンを隣り合わせて配置しようとしていますが、そうすることはできません。あなたが見ることができるように、Twitterのアイコンは、（彼らは両方とも、それぞれのウェブサイトにハイパーリンクされている）。..次の行に落ちる

HTML

<div class="nav3" style="height:705px;"> 
    <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a> 
    </div> 
    <div id="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a> 
    </div> 
</div> 

CSS

.nav3 { 
    background-color: #E9E8C7; 
    height: auto; 
    width: 150px; 
    float: left; 
    padding-left: 20px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333333; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

#icons{position:relative; 
    width: 64px; 
    height: 64px; 
    } 

    #icons a:hover { 
    background: #C93; 
     display: block; 

} 

どのように私はお互いの隣に整列させるのですか？代わりに#iconsでposition:relativeを使用しての事前

Answer 1

で

おかげで、あなたはちょうどそれを奪うと、おそらく画像が隠蔽を取得しないようにZインデックスまたは何かを追加することができます。お役に立てれば。

Answer 2

divの必要はありません。

HTML：

<div class="nav3" style="height:705px;"> 
    <a href="http://www.facebook.com/" class="icons"><img src="images/facebook.png"></a> 
    <a href="https://twitter.com" class="icons"><img src="images/twitter.png"></a> 
</div> 

CSS：

.nav3 { 
    background-color: #E9E8C7; 
    height: auto; 
    width: 150px; 
    float: left; 
    padding-left: 20px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333333; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

.icons{ 
    display:inline-block; 
    width: 64px; 
    height: 64px; 
    } 

a.icons:hover { 
    background: #C93; 
} 

はまたがるthis fiddle

Answer 3

変更のdivを参照してください。そして、スペースのアイコンが

<div class="nav3" style="height:705px;"> 
<span class="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a> 
</span>&nbsp;&nbsp;&nbsp; 
<span class="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a> 
</span> 
</div> 

CSS

.nav3 { 
background-color: #E9E8C7; 
height: auto; 
width: 150px; 
float: left; 
padding-left: 20px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #333333; 
padding-top: 20px; 
padding-right: 20px; 
} 

.icons{ 
display:inline-block; 
width: 64px; 
height: 64px; 
} 

a.icons:hover { 
background: #C93; 
} 

スパンラインを破壊しない  HTMLを使用して、divがありません。

Answer 4

これを確認してください。フロートを使用して、親戚を取り除くだけです。

http://jsfiddle.net/JhpRk/

#icons{float:left;}