小编Sea*_*ean的帖子

便携式HTML/CSS用于垂直对齐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" 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%的用户).

html css

4
推荐指数
1
解决办法
7647
查看次数

标签 统计

css ×1

html ×1