如何将图像和输入与CSS放在同一行 [英] 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?

推荐答案

使用 vertical-align 属性:

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

请参见 更新的小提琴

See updated fiddle

这篇关于如何将图像和输入与CSS放在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！