Html CSS属性float的问题

以下是我正在使用的代码：

---

第1-10页，共300页

它在链接中运行正常，但在我的本地环境中，浮动元素位于同一容器中的其他元素下，如图所示：

---

我尝试了几乎所有的方法，但都没有成功。我正在使用Chrome。

尝试下面的css代码。只需在两个类中添加

float:left

.brs_top_search{
    width: 201px;
    height: 40px;
    background: rgb(22, 105, 105);
    display: inline-block;
    float: left;
}
.brs_top_show_hide{
    height: 40px;
    width: 10px;
    background: rgb(78, 218, 218);
    display: inline-block;
    float: left;
}

---

在ff和chrome上都可以很好地工作。您可以使用Chrome的

inspect element

实用程序来诊断元素的布局有什么问题。似乎其他一些元素破坏了布局，而不是您在此处粘贴的线条和JSFIDLE。

<div class="brs_top_bar">
    <div class="brs_top_search"></div>
    <div class="brs_top_show_hide"></div>
    <div class="brs_top_pages floating">
        <div class="brs_top_pages_info">1 - 10 of 300</div>
        <a href="" title="" class="brs_top_pages_but"><</a><a href="" class="brs_top_pages_but" title="">></a>
    </div>
</div>

.brs_top_search{
    width: 201px;
    height: 40px;
    background: rgb(22, 105, 105);
    display: inline-block;
    float: left;
}
.brs_top_show_hide{
    height: 40px;
    width: 10px;
    background: rgb(78, 218, 218);
    display: inline-block;
    float: left;
}