如何将图像和输入与css放在同一行

Question

我正在尝试做一些非常简单的事情：将图像和输入放在同一行，但无法实现：

HTML

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

CSS

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

正如您从this fiddle清楚看到的那样，图像远远高于输入。我该如何解决？

Answer 1

使用vertical-align属性：

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

参见 updated fiddle

Answer 2

我能用浮子实现你想要的效果：

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

Fiddle

Answer 3

使用vertical-align，like this：

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

Answer 4

您还可以在img like this：

上设置浮动

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