输入文本字段填充

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

的代码是：

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

和结果是两个元件与高度30PX那没有对齐。该文本字段相对于图像 - 像填充？你知道吗，为什么元素不对齐？

截图： enter image description here

来源

2013-06-21 Kiril Spasov

尝试删除空白和边距：

<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;两种风格来看看我的意思。直到您指定希望它们出现在同一行上时，他们不知道如何表现出彼此相邻的行为。

来源

2013-06-21 12:03:38 shennan

谢谢您的回答。不幸的是，你建议不起作用！检查你的代码.... –

我没有你的download_button.png，所以我不能真正的测试它。这只是一个猜测。你是说HTML的突破，还是你说边际，填充和边框设置为0并不能解决你的问题？我也会为图片做同样的事情。 – shennan

只需拍摄30px高的图片，或者发邮件发送。 Yess，我尝试了你的建议，但它不起作用......我也从结果中徘徊，但这是事实......测试它！ –

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

来源

2013-06-21 12:07:01 karthi

谢谢你的回答....我没有窗体... –

@KirilSpasov在没有窗体的文本输入中没有太多意义将它发送回服务器。但这是一个单独的问题。 – shennan

然后只需将其添加到您的表单域。 – karthi

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

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

来源

2013-10-26 04:58:31

输入文本字段填充

回答

相关问题