css - 水平对齐两个 Div 的问题

Question

我试图将两个 div sec-name 和 sec-filters 水平对齐。

这是CSS:

div.sec-head {
    background-repeat: repeat-x;
    border: 1px solid #AFAFAF;
    font-family: arial;
    font-size: 12px;
    height: 24px;
}
.sec-filters {
    float: right;
    //margin-top: -20px;
    padding-left: 10px;
    padding-top: 4px;
}
.clear-float {
    clear: both;
}

问题是右侧的 div(sec-filters)位于左侧 div sec-name 的下方。我希望这两个 div 水平对齐。

这是 HTML:

<div class="sec-head clear-float">
    <div class="sec-name">Heading</div>
    <div class="sec-filters">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</div>

JS-FIDDLE

Answer 1

选项 1:

.sec-name,.sec-filters {    
    display:inline-block;
    width:50%;
}
.sec-filters{
    text-align:right;
}

DEMO fiddle here.

选项 2:

.sec-name {
    float:left;
}
.sec-filters {
    float:right;
}

DEMO here.