如何在IE7中使用按钮进行文本输入？

Question

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

理想情况下，呈现的HTML应显示为:(或类似）

但是它显示为

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

请注意文本框如何显示在按钮的其他行上。这在除IE7之外的所有浏览器中都能正常工作（也许是IE6，但我还没有检查过！）

如何让它与按钮显示在同一行，最好与第一张图像尽可能相似？

Answer 1

左侧输入框中的

float和右侧的float按钮。然后添加边距，直到它们正确排列。

Answer 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中适用于我。