如何使文本输入与IE7中的按钮对齐？答案

【问题标题】：How to make text input line up with button in IE7?如何使文本输入与IE7中的按钮对齐？
【发布时间】：2011-07-05 03:29:59
【问题描述】：

我正在尝试让<input /> 在 IE7 中正确排列在 <button> 旁边。

理想情况下，呈现的 HTML 应该显示为：（或类似）

但它却显示为

这是我正在使用的 HTML/CSS 示例：http://jsfiddle.net/wLpQg/1/

注意文本框如何出现在按钮的不同行上。这在除 IE7 之外的所有浏览器中都能正常工作（可能还有 IE6，但我还没有检查过！）

我怎样才能让它与按钮出现在同一行，最好与第一张图片尽可能相似？

【问题讨论】：

设计流畅，目前对于非常宽的显示，<input> 将与<select> 出现在同一行。您总是想要下面的<select> 还是应该允许所有 5 个元素存在于同一行？
我认为我应该更多地关注使元素按照图像显示。在实际页面中，所有内容都存在于一个固定宽度的容器中，以确保 3 个选择在一行中，并且文本框和按钮在下一行。
嗯，好的。我认为我的解决方案仍应在固定宽度的容器中工作。如果您不想在第二行元素中添加包装器，请评论我的回答，我应该能够想出别的东西:-)

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

float 在左侧的输入框中，float 在右侧的按钮中。然后添加边距，直到它们正确排列。

【讨论】：

【解决方案2】：

如果您希望<input> 和<button> 始终存在于下一行，最简单的方法是将它们包装在容器中，例如：

<div class="search">
    <input type="text" watermarktext="Enter share class name or partial name" value="" name="Search" id="Search" class="search-input watermarkOn">    
    <button id="btnViewResults" type="submit" class="linkButton medium submit"><span><span id="resultCount">View 27090 matches</span></span>
    </button>
</div>

与关联的 CSS：

.search {
    position:relative;
    padding:16px 0;
}

.search button {
    position:absolute;
    right:12px;
}

我最终在您的示例中注释掉了很多 CSS，因为容器现在负责填充和定位。我把你的小提琴分叉成new demo 来演示。这适用于 IE6/IE7/IE8 和 Chrome 14。

【讨论】：