输入文本字段填充

Question

我有这个简单的代码 - 一个文本字段和一个图像（图像的高度是30px）

代码是：

<input type="text" style="height:30px;" />
<input type="image" src="images/download_button.png" />

结果是高度为30px且未对齐的两个元素。文本字段相对于图像向下 - 就像填充???你知道吗，为什么元素没有对齐???

屏幕截图：

Answer 1

           Assuming your form id is "myform"

            #myform input{

            vertical-align:middle;

        }

       will do the trick.
if you are not using form:Try

<input type="text" style="height:30px;vertical-align:middle;" />
<input type="image" style="height:30px;vertical-align:middle;" src="images/download_button.png" />

Answer 2

尝试删除填充和边距：

<input type="text" style="margin:0px;padding:0px;height:30px;" />
<input type="image" style="margin:0px;padding:0px;" src="images/download_button.png" />

请记住，文本输入框可能会为其边框在块的任一侧添加2个像素。您可以将所有边框与border:0;一起删除。

另外，仔细检查标记中其他地方的任何矛盾的CSS规则。

修改

这与浮动输入的行为有关。将两个样式添加float:left;以查看我的意思。在您指定希望它们出现在同一行之前，他们不知道如何彼此相邻。

Answer 3

使用CSS“top”属性增加与顶部的按钮距离：

<style> 
  [selector for image] {top: 20px;}
</style>`