Horizontally aligning input fields

2019-09-01 23:24发布

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 !!!

标签: html css forms
2条回答
放荡不羁爱自由
2楼-- · 2019-09-02 00:05

for textfield:

float: left;

for the button:

margin-top: 2px;
float: right;
查看更多
啃猪蹄的小仙女
3楼-- · 2019-09-02 00:06

add this to your style.

#productSearch form input {
    vertical-align: middle;
}
查看更多
登录 后发表回答