ブラウザ間でのサポートのためにdiv要素内にテーブルを配置する

Question

私はテーブルのファンではないと言って始めましょうが、私はこの問題に対する洗練された解決策を考え出すことができませんでした。 左側に3つのボタンがあり、続いて2つのハイパーリンクが重なっている検索バーを持つページをセットアップしようとしています。この全体の制御は、私が最初に問題に遭遇したWebページ

の中央に描画される必要があるハイパーリンクで、私は、このレイアウトは、テーブルを使用していた得るように見えた唯一の方法でした。

これはサファリまたはクロムで正しくレンダリングされないという2番目の問題につながります。 IEとfirefoxは、ページの中央にこれを適切な位置にあるすべてのものを必要に応じてレンダリングします。しかしSafariとChromeはテーブル（ハイパーリンクを含む）を取り出し、ページのすぐ左にスラムします。

希望のレイアウトを得るためにこれらの要素をレンダリングする方法や、他のすべての左にあるテーブルのレンダリングのSafari/Chromeで問題を少なくとも解決する方法について、誰かが正しい方向で私を指摘できますか？

HTML

<div id="search" class="searchcontainer"> 
       <asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" /> 
       <div class="buttons"> 
        <asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch" 
         OnClick="btnSearch_Click" /> 
        <asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" /> 
        <asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" /> 
       </div> 
       <table id="searchoptions"> 
        <tr> 
         <td> 
          <a href="#" id="btnAdvanceSearch">Advanced Search</a> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <a href="#" id="btnFilters">Filters</a> 
         </td> 
        </tr> 
       </table> 
      </div> 

CSS任意のヒントや提案

を事前に

.searchcontainer 
{ 
    min-width:840px; 
    display:inline; 
    position:relative; 
    padding-top:20px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#searchoptions 
{ 
    display:inline; 
    text-align:left; 
    font-size:.8em; 
    width:100px; 
    padding:0px; 
    vertical-align:top; 
    position:relative; 
    margin:0px; 
} 


#tbsearchterm { 
    width:470px; 
    height:32px; 
    text-align:left; 
    padding-left:10px; 
    padding-right:10px; 
    font-size: 1.3em; 
    border:1px solid #cccccc; 
    -khtml-border-radius: 2px; 
    -ms-border-radius: 2px; 
    -o-border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 

} 

おかげで以下のコードを更新 このコントロールもjquerを使用していますページが読み込まれるときに特定の要素を非表示にするには、yその結果、フロートは最善の選択肢ではありません。要素のいくつかが隠されている場合、コントロールはまだ左にレンダリングされます。このため、メインコンテナ（ "searchcontainer"）にネストされた要素に対してdisplay：inlineを使用する必要があります。

Answer 1

body { width: 100%; text-align: center; } 
.container { overflow: hidden; width: 500px; margin: 0 auto; } 
input { float: left; } 
button { float: left; } 
.links { float: left; } 

<div class="container"> 
    <input type="text"/> 
    <button id="button1">Button 1</button> 
    <button id="button2">Button 2</button> 
    <button id="button3">Button 3</button> 
    <div class="links"> 
     <a href="">Link 1</a><br/> 
     <a href="">Link 2</a><br/> 
    </div> 
</div> 

入力、ボタン、および.link divを左に浮かせます。すべてのブラウザで動作する必要があります。 :)

はここでそれをチェックアウト： http://jsfiddle.net/F7hQf/