Comment mettre une image à côté de l'autre
j'essaie de mettre ces deux icônes "hyperliées" l'une à côté de l'autre, mais je ne peux pas le faire. Comme vous pouvez le voir, l'icône twitter tombe à la ligne suivante.. (ils sont tous deux hyperliés à leur site Web respectif)
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;
}
Comment puis-je faire les alignées l'une à côté de l'autre?
Merci d'avance
4 réponses
Vous n'avez pas besoin de la 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;
}
Voir ce violon
changer div en span. Et espacer les icônes en utilisant
HTML
<div class="nav3" style="height:705px;">
<span class="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a>
</span>
<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;
}
LA PORTÉE ne casse pas la ligne, la div le fait.
Vérifier cela. Il suffit d'utiliser float et se débarrasser de parent.
#icons{float:left;}
au Lieu d'utiliser position:relative#icons, Vous pouvez simplement enlever cela et peut-être ajouter un z-index ou quelque chose de sorte que l'image ne sera pas couvert. Espérons que cette aide.