web-dev-qa-db-fra.com

Afficher une image en plusieurs fois sans la convertir en élément de niveau bloc

Je suis un peu confus ici. J'ai une txtbox et à la droite de la txtbox, je veux insérer une icône d'aide. Je l'ai inséré dans une travée. le problème est que je ne veux pas faire de cette période un bloc parce qu’elle tombe en panne ensuite. Existe-t-il un autre moyen d'afficher cette image sans en faire un élément de niveau bloc?

Le code va ici:

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

Le CSS:

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

Vous pouvez utiliser ce CSS: 

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

Vous devez utiliser le bloc d'affichage pour activer les largeurs et les hauteurs et accepter d'autres styles. Mais pour contrer votre problème de "descente", vous pouvez définir les deux éléments comme flottant à gauche et ils resteront alignés dans l'élément parent.

Sachez que si l'icône est relative au contenu, elle devrait être incluse avec la balise <img> et un attribut alt.

Après avoir constaté que vous ne souhaitez pas utiliser le bloc d'affichage floats OR, il ne reste plus qu'un moyen, utilisez display: inline-block;.

Exemple pour vous ici . :)

19
Kyle

Enveloppez les deux éléments dans une div, faites de l’étendue un bloc et attribuez un style CSS de float: left aux balises d’entrée et d’étendue.

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

Et le CSS

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

#firm {
    float: left;
}
1
adarshr

Ne pouvez-vous pas utiliser une balise img pour l'image? Cela affichera inline.

Généralement, l’img n’affiche pas votre icône à une jolie hauteur (elle sera trop haute). Utilisez soit vertical-align pour cela (souvent text-bottom fonctionnera) ou utilisez position: relative et top: 3px ou plus sur l'img.

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

css

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