<input />は、IE7の<button>の横に正しく並べるようにしようとしています。IE7のボタンでテキスト入力行を作成する方法は？
理想的には、レンダリングされたHTMLのように表示されます：（または類似）
ではなく、HTML/CSS Iの一例である
として現れています'mを使用して：http://jsfiddle.net/wLpQg/1/
どのようにテキストボックスは、 eボタンを押します。これはIE7を除くすべてのブラウザで正常に動作します（そして、おそらくIE6ですが、私はそれをチェックしていません）。
これは、できるだけ最初のイメージと同様に、ボタンと同じ行に表示するにはどうすればよいですか？
float左側の入力ボックスにあり、float右側のボタンです。次に、余白が正しく整列するまで追加します。
あなたは<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>
.search {
position:relative;
padding:16px 0;
}
.search button {
position:absolute;
right:12px;
}
あなたの例では、多くのCSSがコメントアウトされました。コンテナがパディングと配置を処理するようになったからです。あなたのバイブルをnew demoにフォークしてデモンストレーションしました。これはIE6/IE7/IE8とChrome 14の私のために働いています。
デザインは流動的で、現在は非常に広いディスプレイのため、 '
私は、画像ごとに要素を表示するようにもっと焦点を当てるべきだったと思います。実際のページでは、3つの選択が1行にあることを保証する固定幅のコンテナ内にすべてが存在し、テキストボックスとボタンは次の行にあります。 – DaveDev
ああ。私は私の解決策は、まだ固定幅の容器内で動作すると思う。 2行目の要素にラッパーを追加したくない場合は、私の答えにコメントしてください。私は他の何かを考え出すことができます:-) – andyb