Menu
I have a div that hold some anchor tags as shown below. And also a <hr> tag to segment my page. however even using the div as a block element wouldn't force the <hr> element to start on a new line rather it aligns the <hr> next to the div.
how can i resolve this?
<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;
}
997
There are 2 main ways to add line breaks: through line break <br> tags and through paragraph tags <p> . So all you have to do is to put those tags in between your tags. There is one semantic correct way to add a line-break, <br> . <p> does the same job, but has another semantic, since it introduces a paragraph.
It is an inline-level element and does not break to the next line unless its default behavior is changed. To make these examples easier to use and understand for all types of computer users, we're using the style attribute in the div.
Press ALT+ENTER to insert the line break.
A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).
The float:left is causing the problem. Apply clear:both; to <hr> will do:
hr{ clear:both; }
DEMO
159
Find below the solution with HTML (CSS will remain same). I've modified code for brevity.
<div id="inner">
<div id="headerBlock">
<a>Actor2</a>
<span class='rowNumber2'> | </span>
<a>Actor1</a>
</div>
</div>
<hr style="clear:both;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
