it-swarm.com.de

Zeigen Sie ein Bild im Bereich an, ohne es in ein Blockebenenelement zu konvertieren

Ich bin hier etwas verwirrt. Ich habe eine Txtbox und rechts neben der Txtbox möchte ich ein Hilfesymbol einfügen. Ich habe das in eine Spanne eingefügt. Das Problem ist, dass ich diese Spanne nicht zu einem Block machen möchte, weil sie dann nach unten geht. Gibt es eine andere Möglichkeit, dieses Bild anzuzeigen, ohne daraus ein Block-Level-Element zu machen?

Der Kodex geht hier:

<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span>

Das CSS:

#helpico{ background:url(images/question.png) left top; width:16px; height:16px;}
10
themajiks

Sie können dieses CSS verwenden: 

#firm 
{
   float: left;
}
#helpico
{ 
   background:url(images/question.png) left top; 
   width:16px; 
   height:16px;
   display: block;
   float: left;
}

Sie müssen den Anzeigeblock verwenden, um Breiten und Höhen zu aktivieren und andere Stile zu akzeptieren. Um dem Problem zu begegnen, dass es "nach unten geht", können Sie beide Elemente so einstellen, dass sie nach links gleiten, und sie bleiben im übergeordneten Element inline.

Wenn das Symbol relativ zum Inhalt ist, sollte es in den Tag <img> und ein alt-Attribut eingefügt werden.


Nachdem Sie festgestellt haben, dass Sie den Anzeigeblock OR nicht verwenden möchten, gibt es nur noch einen Weg, verwenden Sie display: inline-block;.

Beispiel für Sie hier . :)

19
Kyle

Wickeln Sie beide Elemente in ein div ein, machen Sie den Span zu einem Block und geben Sie den Eingabe- und den Span-Tags einen CSS-Stil von float: left.

<div id="wrap">
    <input name="firm" type="text" id="firm" size="20" />
    <span id="helpico"></span>
</div>

Und das CSS

#helpico { 
    background:url(images/question.png) left top; 
    width:16px; 
    height:16px;
    display: block;
    float: left;
}

#firm {
    float: left;
}
1
adarshr

Kannst du kein Img-Tag für das Bild verwenden? Das wird inline angezeigt.

Im Allgemeinen zeigt das img Ihr Symbol nicht in einer ziemlich großen Höhe an (es ist zu weit oben). Verwenden Sie dazu entweder vertikal ausrichten (häufig klappt Text unten) oder verwenden Sie position: relative und top: 3px oder so weiter img.

<input name="firm" type="text" id="firm" size="20" /><img id="helpico" src="images/question.png">

css

#helpico { vertical-align:text-bottom; }
1