Wie erstellt man ein Bild mit einem Anker-Tag, das in einer Zeile angezeigt wird?

Question

Hier ist mein HTML:

<td class="fmt-str-h"> 
<a href="#"> 
<img class="icon" src="img/preferences-system.png"> 
Tools</a> 
</td> 

und das ist mein CSS:

TD.fmt-str-h  { text-align: left; padding: 4px 8px 4px 12px; } 
TD.fmt-str-h A {color: #fff;} 
A    { text-decoration: none; 
        color: #0071dd; 
        font-weight: normal; } 
IMG.icon   { padding: 2px; 
        color: #FFF; 
        cursor: pointer; 
        vertical-align: middle; } 

This is the result of my code.

Also, ich mag das Symbol machen mit seinem Anker-Tag in einer Linie zu sein. Ich habe versucht mit "display: inline-block" auf dem TD und dem Anchor aber nichts ist passiert. Können Sie mir dabei helfen?

Answer 1

hinzufügen white-space: nowrap auf Ihre fmt-str-h A Klasse

TD.fmt-str-h A { 
    color: #fff; 
    white-space: nowrap; 
}