J'ai une image et une étiquette h3 ensemble, et j'en ai besoin côte à côte.image glissant vers le bas avec l'étiquette h3
<img src="..." alt="..." /><h3>Shopping Cart</h3>
Mais l'image glisse vers le bas. Comment puis-je résoudre ça?
float:left; utiliser sur les deux ou display:inline; pourrait être mieux essayer les deux
flotteur l'élément 2 float:left pour img et float:right pour la balise h3
s'il n'y a pas assez d'espace pour h3 alors il sera descendre. utilisation display:inline-block au lieu de float essayer
<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3>
display: inline pour les deux fonctionnent mieux. L'autre chose est que vous devriez les inclure dans un div avec une largeur fixe (ie: width: ___px) ou une min largeur (ie: min-width: ___px) donc vous gardez toujours suffisamment d'espace horizontal pour qu'ils s'assoient côte à côte. Quelle que soit la solution que vous utilisez pour les faire s'asseoir côte à côte, s'il n'y a pas assez de largeur et que vous ne préservez pas la largeur, ils s'effondreront et s'empileront verticalement.
Si l'image est liée au titre, puis la balise IMG doit aller à l'intérieur du H3:
<h3><img ... /> Shopping Cart</h3>
Une fois que vous avez fait cela, vous pouvez ajuster l'alignement vertical de l'image par rapport au base de la position en utilisant quelque chose comme:
h3 img {top:5px}une autre idée est de supprimer l'IMG entièrement et donner le H3 un nom de classe spéciale qui ajoute rembourrage et montre l'icône comme une image d'arrière-plan. C'est bien, car il est plus facile de changer une feuille de style qu'un modèle HTML, le code est plus court et la page est plus accessible.
h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}
besoin d'ajouter 'display: bottom' –