在div之后添加或强制换行

Question

我有一个div持有一些锚标签,如下所示.还有一个<hr>标记来分割我的页面.然而,即使使用div作为块元素也不会强制<hr>元素在新行上开始,而是将<hr>下一个与div 对齐.

我怎么解决这个问题？

<div id="inner">
    <div id="headerBlock">
        <a href='.actorgroup' id='346' onclick='return displayactorgroupFunc(this.id);'>Actor2</a>
        <span class='rowNumber2'> | </span>
        <a href='.actorgroup' id='15201' onclick='return displayactorgroupFunc(this.id);'>Actor1</a>
    </div>
</div><hr/>

CSS:

#headerBlock{
    display: block;
}
#inner {
     padding:10px;
     display:block;
     float: left;
}
#inner a{
     display:inline-block;
     padding-left:20px;
     line-height:20px;
     color:#808000;
     font-size:14px;
     text-decoration: none;
}

Answer 1

这float:left是导致问题的原因.应用clear:both;到<hr>会做:

hr{ clear:both; }

DEMO

Answer 2

在下面找到 HTML 的解决方案（CSS 将保持不变）。为简洁起见，我修改了代码。

<div id="inner">
    <div id="headerBlock">
        <a>Actor2</a>
        <span class='rowNumber2'> | </span>
        <a>Actor1</a>
    </div>
</div>
<hr style="clear:both;">