Hinzufügen oder Zwingen Zeilenumbruch nach div

Ich habe eine div halten, dass einige Anker-tags wie unten gezeigt. Und auch ein <hr> tag-zu-segment meiner Seite. aber auch mit dem div als block element würde nicht zwingen, die <hr> element an den Anfang einer neuen Zeile, sondern es richtet den <hr> neben den div.

wie kann ich dies beheben?

<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;
}
display:block für <a> tag? ist es das, was Sie brauchen?
meine schlecht, ich bearbeitet die Frage @math3w, ich möchte eine neue Zeile nach dem div(innen). haben Sie eine Idee?
würde <br><hr> arbeiten Sie?
versuchen clear:both; <hr>
versuchen Sie, diese jsfiddle.net/gr0ope1s

InformationsquelleAutor Tunde Pizzle | 2015-03-16

  1. 12

    Den float:left ist das problem verursacht. Gelten clear:both; zu <hr> tun:

    hr{ clear:both; }

    DEMO

    InformationsquelleAutor Math3w

  2. 3

    Nachfolgend finden Sie die Lösung mit HTML (CSS bleibt gleich). Ich habe mir geänderten code für die Kürze. 

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

    InformationsquelleAutor Bikas

  3. 0

    Hinzufügen dieser Stil

    .rowNumber2{
    display : block;
}
    der Zeilenumbruch wird für die <hr> - element. ich möchte das hr-element nach dem div-inner

    InformationsquelleAutor stanze

  4. 0

    Alles das half nichts. Für meine Zwecke war es so einfach wie das hinzufügen.

    page-break-inside: avoid;

    Diese teilt dem browser mit, um die Behandlung von div/Objekt angewendet wird als ein einzelnes Objekt, sollte nicht verteilt über mehrere Seiten.

    InformationsquelleAutor Chris Werner

Schreibe einen Kommentar