div

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

इस शैली

.rowNumber2{ 
    display : block; 
} 

Answer 3

HTML के साथ समाधान (सीएसएस एक ही रहेगा) नीचे का पता लगाएं जोड़ें। मैंने ब्रेवटी के लिए कोड संशोधित किया है।

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

Answer 4

इस में से कोई भी मदद की। मेरे उद्देश्य के लिए यह जोड़ने के रूप में सरल था।

page-break-inside: avoid; 

यह ब्राउज़र बताता div इलाज/यह एक वस्तु है कि एक से अधिक पृष्ठों में विभाजित नहीं किया जाना चाहिए के रूप में पर लागू की गई आपत्ति उठाने का।