How can I put an icon and an input text on the same line?

I want to put an icon on the left and an input type text on the right occupying all the remaining space.

----------------------------------------------------
| [ico]  ----------------------------------------  |
|        |   input type="text"                  |  |
|        ----------------------------------------  |
----------------------------------------------------

If I set both with display: inline-block and set the input's width to 100% it jumps the line, because 100% 开发者_运维问答is not considering the space - icosize...

I want to expand the input to the remaining available space (I don't care for vertical align). Is there a way to achieve this behavior without using tables?

An example of the problem on jsFiddle.

A bit less complicated that ianaré's version and works in IE6:

http://jsfiddle.net/sUYBS/23/

Try this ...

<div style="display: table;">
<div style="display: table-row; width:100%;">
    <div style="display: table-cell;">
    <img src="img.png" width="16" height="11" alt="img"/>
    </div>
    <div style="display: table-cell; width:100%;">
    <input type="text" style="width:100%;"/>
    </div>
</div>
</div>

float:left; for the icon. See, http://jsfiddle.net/sUYBS/11/

i think the answer is vertical-align: middle but see Understanding vertical-align, or "How (Not) To Vertically Center Content"

Try display: table-cell .

Did you try to use align="absmiddle" in the icon?

<img src="img.jpg" align="absmiddle">