Hinzufügen oder Erzwingen von Zeilenumbrüchen nach div

Question

Ich habe eine div, die einige Anker-Tags wie unten gezeigt halten. Und auch ein <hr> Tag, um meine Seite zu segmentieren. aber selbst mit dem div als Block Element würde das <hr> Element nicht zwingen, auf einer neuen Linie zu starten, sondern es richtet die <hr> neben dem div.

Wie kann ich das auflösen?

<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

Die float:left verursacht das Problem. Bewerben clear:both;-<hr> tun:

hr{ clear:both; } 

DEMO

Answer 2

In diesem Stil

.rowNumber2{ 
    display : block; 
} 

Answer 3

unterhalb der Lösung mit HTML finden (CSS wird gleich bleiben). Ich habe den Code zur Kürze geändert.

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

Answer 4

Nichts davon geholfen. Für meinen Zweck war es so einfach wie das Hinzufügen.

page-break-inside: avoid; 

Dies teilt den Browser, um das div zu behandeln/Objekt, um es als ein einzelnes Objekt angewandt wird, die nicht über mehrere Seiten aufgeteilt werden soll.