Bild rutscht mit h3-Tag

Question

Ich habe ein Bild und h3 Tag zusammen, und ich brauche sie nebeneinander.

<img src="..." alt="..." /><h3>Shopping Cart</h3> 

Aber das Bild rutscht nach unten. Wie kann ich das beheben?

Answer 1

float:left; verwenden Sie es auf beiden oder display:inline; könnte besser sein, versuchen beide

Answer 2

Schwimmer das 2 Element float:left für img und float:right für h3-Tag

wenn es für h3 nicht genug Platz ist, dann wird es gehen. Verwendung display:inline-block statt Schwimmer versuchen

<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3> 

Answer 3

display: inline für beide wird besser funktionieren. Die andere Sache ist, dass Sie sie wahrscheinlich in ein div entweder mit einer festen Breite (dh: width: ___px) oder einer minimalen Breite (dh: min-width: ___px) einschließen sollten, so dass Sie immer genügend horizontalen Raum für sie nebeneinander sitzen erhalten. Egal, welche Lösung Sie verwenden, um sie nebeneinander zu sitzen, wenn es nicht genug Breite gibt und Sie die Breite nicht beibehalten, dann werden sie zusammenfallen und vertikal stapeln.

Answer 4

Wenn das Bild mit dem Titel verwandt ist, dann sollte der IMG-Tag in der H3 gehen:

<h3><img ... /> Shopping Cart</h3>

Sobald Sie getan haben, dass können Sie das Bild der vertikalen Ausrichtung in Bezug auf das Einstellen Basislinie der Überschrift durch so etwas wie mit:

h3 img {top:5px}

eine weitere Idee ist es, die IMG vollständig und gibt dem H3 einen speziellen Klassennamen, die Polsterung fügt zu entfernen und zeigt das Symbol als Hintergrundbild. Das ist gut, weil es einfacher ist, ein Stylesheet als eine HTML-Vorlage zu ändern, der Code ist kürzer und die Seite ist leichter zugänglich.

h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}