html - 用于将 type=image 的输入与 type=text 的输入垂直对齐的可移植 HTML/CSS？

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>

我遇到的问题是，第一个输入文本框与文本“Enter a foo:”对齐得很好，但其他两个输入与文本框对齐很差；它们大约高了 7 个像素。所有这些元素的边距和填充都设置为 0。

如果我将 align="middle"添加到图像输入，那么它们将向下移动 12 个像素，因此它们太低了 5 个像素，这让我感到困惑。更令人困惑的是，CSS vertical-align 属性不会影响输入元素(它们会忽略它)，所以我很难想象如何在 CSS 中解决这个问题。

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

Answer 1

添加这个:

style='vertical-align: bottom'

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

这使得图像的底部边缘与输入框的底部边缘对齐。

(默认情况下它们“太高”的原因是内联图像的底部边缘与文本的基线对齐 - 下面的间隙是为了容纳文本 decenders:q、p、g 等。 )

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