How to put image and input on the same line with css

问题

I am trying to do something really simple: have image and input on the same line, but can not achieve it:

HTML

<img src="path/to/img"/>
<input/>

CSS

img {
    height: 50px;
}
input {
    height: 50px;
    margin: 0;
    padding: 0;
}

As you clearly see from this fiddle, image is much higher than the input. How can I fix it?

回答1:

Use the vertical-align property:

img{
    height: 50px;
    vertical-align: middle;
}

See updated fiddle

回答2:

I was able to achieve the effect you are looking for with floats:

img{
    height: 50px;
    float: left;
}
input{
    height: 50px;
    margin: 0;
    padding: 0;
    float: left;
}

Fiddle

回答3:

Use vertical-align, like this:

img{
    height: 50px;
    vertical-align: middle;
}
input{
    height: 50px;
}

回答4:

You can also set float on the img like this:

img{
    height: 50px;
    float:left;
}
input{
    height: 50px;
}

来源：https://stackoverflow.com/questions/24520295/how-to-put-image-and-input-on-the-same-line-with-css