如何将图像和输入与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?

正如你从这个小提琴中清楚地看到的那样,图像远远高于输入。我该如何解决?

4 个解决方案

#1

Use the vertical-align property:

使用vertical-align属性:

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:

使用vertical-align,如下所示:

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

#4

You can also set float on the img like this:

你也可以像这样在img上设置float:

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

#1