Html 在div元素中定位表格以支持跨浏览器

首先，我要说的是，我不喜欢桌子，但我还没能想出一个优雅的解决方案来解决这个问题。 我正在尝试设置一个页面，该页面有一个搜索栏，左侧有三个按钮，后面是两个堆叠在一起的超链接。整个控件需要呈现在网页的中心

我遇到的第一个问题是关于超链接的，我获得这种布局的唯一方法似乎是使用表

这导致了第二个问题，即不能在safari或chrome中正确渲染。IE和firefox会根据需要在页面中央呈现此内容，并将所有内容放置在适当的位置。然而，Safari和chrome占据了表格（包含超链接）并将其猛击到页面的最左边

有人能告诉我如何渲染这些元素以获得所需布局的正确方向吗？或者至少能纠正我在Safari/chrome中遇到的问题，将表渲染到其他所有内容的左侧

代码如下

html

提前感谢您提供的任何提示或建议

更新 该控件还使用jquery在页面加载时隐藏某些元素。因此，浮动不是最佳选择。当某些元素被隐藏时，控件仍向左渲染。因此，我需要对嵌套在主容器（“searchcontainer”）中的元素使用display:inline。

body{width:100%；text align:center；}
.container{溢出：隐藏；宽度：500px；边距：0自动；}
输入{float:left；}
按钮{float:left；}
.links{float:left；}
按钮1
按钮2
按钮3

只需将输入、按钮和.link div向左浮动即可。应适用于所有浏览器。：）

---

在这里查看：

谢谢Jemaclus。这很接近，我不能使用float，因为我在控件中有加载时隐藏的元素（链接按钮2和3），jquery在初始搜索后将这些元素呈现出来。因此，float在加载时不会使对象在页面中居中，否则它将非常接近。我发现我必须在每个元素上使用display:inline，但这会导致超链接仍然在控件下“包装”。

 <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>

    .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;

}

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>