便携式HTMLCSS用于垂直对齐type = image的输入和type = text的输入？

概述我试图用水平布局制作这样的表格： <form id="foo" name="foo" method="post" action="fooaction"> <p>Enter a foo: <input type="text" id="fooText" name="fooText"value=""/> <input type="image" name="yes" 我试图用水平布局制作这样的表格：

<form ID="foo" name="foo" method="post" action="fooaction">    <p>Enter a foo:        <input type="text" ID="fooText" name="fooText"value=""/>        <input type="image" name="yes" ID="foosubmitYes" value="1" src="yes.png" title="Yes" wIDth="24" height="24"/>    <input type="image" name="no" ID="foosubmitNo" value="0" src="no.png" title="No" wIDth="24" height="24"/>    </p></form>

我的问题是第一个输入,即文本框,与文本“输入foo：”对齐,但其他两个输入与文本框对齐得很差;他们大约7像素太高了.所有这些元素的边距和填充都设置为0.

如果我在图像输入中添加了align =“mIDdle”,那么它们会向下移动12个像素,因此它们的像素太低了5个像素,这让我大吃一惊.更令人困惑的是,CSS vertical-align属性不会影响输入元素(它们会忽略它),所以我很难想象如何在CSS中修复它.

有没有人知道一种浏览器可移植的方式来制作带有标题,输入文本框和两个提交水平布局和一致垂直对齐的图像的表单？如果没有,我会满足于在firefox中运行的东西:)(95％的用户).

解决方法 添加这个：

style='vertical-align: bottom'

到< input type =“image”>在firefox和IE中,元素看起来不错.

这使得图像的下边缘与输入框的下边缘对齐.

(默认情况下它们“太高”的原因是内嵌图像的下边缘与文本的基线对齐 – 下方的间隙是为了容纳文本下伸符：q,p,g等)

我不确定是什么让你说“CSS vertical-align属性不影响输入元素”但它对我有用 – 也许还有一些其他问题阻止了为你工作.

总结

以上是内存溢出为你收集整理的便携式HTML / CSS用于垂直对齐type = image的输入和type = text的输入？全部内容，希望文章能够帮你解决便携式HTML / CSS用于垂直对齐type = image的输入和type = text的输入？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。