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

Question

我试图用水平布局制作这样的表格:

<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%的用户).

Answer 1

添加这个:

style='vertical-align: bottom'

<input type="image">在Firefox和IE中,元素看起来不错.

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

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

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