Jak umieścić obraz obok siebie?

Question

Próbuję umieścić te dwie ikony "hiperłącze" obok siebie, ale nie mogę tego zrobić. Jak widać, ikona twitter spada do następnej linii .. (oba są linkiem do ich stronie internetowej)

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; 

} 

Jak ustawić wyrównanie obok siebie?

góry dzięki

Answer 1

Zamiast position:relative w #icons, można po prostu przyjąć, że z dala, a może dodać z-index lub coś dzięki czemu obraz nie zostanie pokryta. Mam nadzieję że to pomoże.

Answer 2

Nie potrzebujesz diva.

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; 
} 

Zobacz this fiddle

Answer 3

Zmień div span. I przestrzeń ikony wykorzystujące   HTML

<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; 
} 

przęsło nie łamie linię, div robi.

Answer 4

Sprawdź to. Po prostu użyj float i pozbądź się krewnego.

http://jsfiddle.net/JhpRk/

#icons{float:left;}