Affichage des icônes et du texte sur la même ligne
Je vais essayer d'obtenir le texte (à la Maison, Sur Nous, Fromage,...), etc pour afficher à droite des icônes de médias sociaux, de sorte que la base du texte est aligné avec la base des icônes et qu'ils apparaissent sur la même ligne.
Comment puis-je faire cela?
Mon code est dans le violon ici http://jsfiddle.net/pnX3d/
<div class="grid_5" id="social_icons">
<a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
</div>
<nav class="topmenu omega">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About Us</a> |</li>
<li><a href="#">Cheeses</a></li>
</ul>
</nav>
Placer l'icône dans un span à l'intérieur de la li.
A ma réponse travaillé?
A ma réponse travaillé?
OriginalL'auteur Dano007 | 2013-09-14
Vous devez vous connecter pour publier un commentaire.
Ces changements dans votre CSS devrait faire l'affaire:
OriginalL'auteur DevlshOne
Ajouter
float: left
à#social_icons
et.topmenu li
.Voici une démo: http://jsfiddle.net/ZsJbJ/.
Espère que ça aide!
OriginalL'auteur Kai Feller
Flotter le
.topmenu
àright
et#social_icons
vers la gauche. Donnerpadding-left:0;
pour laul
et donnerdisplay:inline-block
pour.topmenu
. S'il vous plaît vérifiez dans le violonhttp://jsfiddle.net/pnX3d/10/
OriginalL'auteur noob
Merci pour vos commentaires, mais en fait, j'ai fini à l'aide de la suite. Comme ce n'est pas un site de production et je suis le seul à expérimenter, je voulais l'utiliser flex colonnes. Le ci-dessous en fait réduit le code requis.
HTML
CSS
OriginalL'auteur Dano007