输入文本字段填充答案

【问题标题】：input text field padding输入文本字段填充
【发布时间】：2013-06-18 13:08:03
【问题描述】：

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

代码是：

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

结果是两个高度为 30px 的元素未对齐。文本字段相对于图像向下 - 比如填充？？？你知道，为什么元素不对齐？？？

截图：

【问题讨论】：

标签： text alignment field padding

【解决方案1】：

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

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

【讨论】：

【解决方案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; 添加到两种样式中以了解我的意思。在您指定希望它们出现在同一行之前，它们不知道如何彼此相邻。

【讨论】：

感谢您的回答。不幸的是，您的建议不起作用！检查你的代码....
我没有你的 download_button.png，所以我无法真正完全测试它。这只是一个猜测。您是说 HTML 中断还是说将边距、填充和边框设置为 0 并不能解决您的问题？我也会对图像做同样的事情。
只需拍摄任何高度为 30 像素的图像，或者给我发送电子邮件。是的，我尝试你的建议，但它不起作用......我也从结果中徘徊，但这是事实......测试它！
我很懒 :-) 我又被捅了一刀，再看看我的回答。

【解决方案3】：

           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" />

【讨论】：

@KirilSpasov 在没有表单将其发送回服务器的文本输入中没有多大意义。但这是一个单独的问题。
然后将其添加到您的表单字段中。
添加表单...结果相同... :(((((((
添加表格。给你的表单一个 id（例如“myform”）。现在添加 css 如下：#myform input{vertical-align:middle;} 我检查了它，它工作得很好。