Как сделать так, чтобы ввод текста совпал с кнопкой в ​​IE7?

Question

Я пытаюсь заставить <input /> правильно выстроиться рядом с <button> в IE7.

В идеале визуализированный 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 в вашем примере, так как контейнер теперь заботится о заполнении и позиционировании. Я раздвоил твою скрипку в новом демо для демонстрации. Это работает для меня в IE6 / IE7 / IE8 и Chrome 14.