Question

我在用ASP.NET创建的页面上有一个搜索文本框和两个图像按钮。

当我使用IE8，Google Chrome或Opera查看该页面时，文本框与两个图像按钮不对齐。按钮显示高于文本框，我无法分辨原因。

以下是关键标记：

<div id=searchbar>
    <div id=Panel1
        onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
        <input id=txtSearch type=text name=ctl00$txtSearch>
        <input id=btnSearch title=Search src="Test_files/search.png"
            type=image name=ctl00$btnSearch>
        <input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
            type=image name=ctl00$btnAdvanced>
    </div>
</div>

注意：我意识到这里有一些奇怪的东西，例如ID周围没有引号。但是在我的来源中有 ARE 引号。上面的代码段来自于保存IE中的内容，并对标记进行了一些更改。

如果有人愿意看一下，我也会在http://www.blackbeltcoder.com/Test/Test.htm张贴相同的代码。问题在于靠近顶部黑条右侧的搜索控件。

感谢。

Answer 1

尝试

vertical-align:text-bottom;

关于太高的元素。这是一个常见问题。如果不完全正确，您也可以尝试该CSS属性的其他选项。看看here

Answer 2

只需添加

vertical-align: middle;

到输入标签css，这应该解决问题

任何人都可以找出这个CSS对齐问题吗？

2 个答案: