I would like the navigation links on this page to each appear on their own line:
A. Without using "display:block
" - as that makes the hover animation take up the full width of the container, not just the <a>
element.
B. Without using <br>
tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.
Thanks for your help.
You can use a <p> tag instead of span and it will move the text under without needing the <br> .
There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.
Set size and make inline Because they're block elements, when reducing the size of Div one to make room for the other div, you're left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.
Use block-level elements to break the line without using <br> tag. There are many ways to break the line without using <br> tag. The used properties are listed below: white-space: pre; It is used to make elements acts like <pre> tag.
Have you tried float:left; clear:left
?
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