Question

我有div，其中包含一些锚标记，如下所示。还有一个<hr>标记用于细分我的网页。但是，即使将div用作块元素，也不会强制<hr>元素在新行上开始，而是在div旁边对齐<hr>。

我该如何解决这个问题？

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

Answer 3

添加此款式

.rowNumber2{
    display : block;
}

Answer 4

这些都没有帮助。为了我的目的，它就像添加一样简单。

page-break-inside: avoid;

这告诉浏览器将它应用的div /对象视为不应分割为多个页面的单个对象。

在div之后添加或强制换行

4 个答案: