我试图用水平布局制作这样的表格:
<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>
Run Code Online (Sandbox Code Playgroud)
我的问题是第一个输入,即文本框,与文本"输入foo:"对齐,但其他两个输入与文本框对齐得很差; 他们大约7像素太高了.所有这些元素的边距和填充都设置为0.
如果我在图像输入中添加了align ="middle",那么它们会向下移动12个像素,因此它们的像素太低了5个像素,这让我大吃一惊.更令人困惑的是,CSS vertical-align属性不会影响输入元素(它们会忽略它),所以我很难想象如何在CSS中修复它.
有没有人知道一种浏览器可移植的方式来制作带有标题,输入文本框和两个提交水平布局和一致垂直对齐的图像的表单?如果没有,我会满足于在Firefox中运行的东西:)(95%的用户).