Display an image in span without converting it to a block level element

I am a little confused over here. I have a txtbox and to the right of the txtbox, i want to insert a help icon. i have inserted that into a span. 开发者_运维知识库the problem is that i dont want to make this span a block because it goes down then. is there any other way to display this image without turning this into a block level element?

The Code goes here:

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

The CSS:

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

You can use this CSS:

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

You have to use display block to enable widths and heights and to accept other styles. But to counter your issue of it "going down" you can set both the elements to float left and they will remain inline within the parent element.

Be aware that if the icon is relative to the content, it should be included with <img> tag and an alt attribute.

After seeing that you don't want to use floats OR display block, there is only one way left, use display: inline-block;.

Example for you here. :)

Wrap both the elements in a div, make the span a block and give a CSS style of float: left to both the input and span tags.

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

And the CSS

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

#firm {
    float: left;
}

Can't you use an img tag for the image? That will display inline.

Generally the img will not display your icon at a pretty height (it will be too far up). Use either vertical-align for that (often text-bottom will work out) or use position:relative and top:3px or so on the img.

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

css

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