0

これらは私が使用しているコードです: http://jsfiddle.net/VaKSG/ 

.brs_top_bar{
    width: 900px;
    height: 40px;
    background: rgb(27, 124, 124);
    border-bottom: 1px solid rgb(20, 92, 92);
    color: white;
}
.brs_top_search{
    width: 201px;
    height: 40px;
    background: rgb(22, 105, 105);
    display: inline-block;
}
.brs_top_show_hide{
    height: 40px;
    width: 10px;
    background: rgb(78, 218, 218);
    display: inline-block;
}
.brs_top_pages_info{
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 30px;
    vertical-align: top;
}
.brs_top_pages_but{
    text-decoration: none;
    color: white;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    height: 28px;
    width: 28px;
    background: rgb(35, 156, 156);
    border: 1px solid rgb(31, 139, 139);
    display: inline-block;
 }
 .brs_top_pages{
    margin: 5px;
    height: 30px;
    display: inline-block;
    vertical-align: top;
 }
.floating{
    float: right;
    position: relative;
 }

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

リンクでは正常に実行されますが、私のローカル環境では、フロートされた要素は、図に示すように同じコンテナー内の他の要素の下に入ります。

私はそれを正しくするためにほとんどすべてを試しましたが、うまくいきませんでした.私はChromeを使用しています.

4

1 に答える 1

0

以下の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;
}
于 2013-03-29T09:13:19.043 に答える