Question

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

enter image description here

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

这导致第二个问题是它没有在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在页面加载时隐藏某些元素。因此，浮动不是最佳选择。当某些元素被隐藏时，控件仍然向左移动。出于这个原因，我需要使用display：inline来嵌套在主容器中的元素（“searchcontainer”）。

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/

将表放在div元素中以便跨浏览器支持

1 个答案: