Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make an <a> tag move onto a new line, without using "display:block"

Tags:

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.

like image 554
Caroline Elisa Avatar asked Apr 03 '12 20:04

Caroline Elisa


People also ask

How do I move an element to the next line in HTML?

You can use a <p> tag instead of span and it will move the text under without needing the <br> .

How do I force a new line in CSS?

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.

How do I move a div to the next line?

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.

How do you break a line without a br tag?

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.


1 Answers

Have you tried float:left; clear:left ?

like image 167
Ricardo Castañeda Avatar answered Sep 23 '22 21:09

Ricardo Castañeda