html - 在 div 元素中定位表格以实现跨浏览器支持

Question

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

我遇到的第一个问题是超链接，我似乎获得此布局的唯一方法是使用表格。

这会导致第二个问题无法在 safari 或 chrome 中正确呈现。 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;

}

提前感谢任何提示或建议

更新 此控件还使用 jquery 在页面加载时隐藏某些元素。因此， float 不是最佳选择。当一些元素被隐藏时，控件仍然呈现在左侧。出于这个原因，我需要对嵌套在主容器(“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/