Horizontally aligning input fields

问题:

I am trying to get an input field, and it's associated submit button on the same horizontal line, but proving to be a challenge.

Here is my code:

<form name="prodSearch" action="/products/index.cfm" method="post">
        <input type="text" name="prodKeyword" maxlength="50">
        <input type="image" name="submit" src="/_css/images/but-ok-small.png">
</form>

You can view the site at (form is in the header) : http://d620923.u161.fasthit.net/

Basically I either need to nudge the input field up a bit, or the button down a bit. I've tried everything.. line height, padding, margin, tables etc.. but can't get them to budge.

Any suggestions greatly appreciated !!!

回答1:

add this to your style.

#productSearch form input {
    vertical-align: middle;
}

回答2:

for textfield:

float: left;

for the button:

margin-top: 2px;
float: right;