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

Go To


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.

2012-04-03 20:14
by Caroline Elisa
They already appear on their own line - PeeHaa 2012-04-03 20:17
Maybe helps - alxndr 2014-04-08 00:06


Have you tried float:left; clear:left ?

2012-04-03 20:18
by Ricardo Castañeda
Thank you Cadence - Caroline Elisa 2012-04-03 20:33


wrap you navigation in ul, li:

    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>


ul {list-style: none} li {display: block}

This lets you style your anchors accordingly while forcing them to break lines.

2012-04-03 20:19
by David Nguyen
Thanks for the quick response David, but I avoided using a list to make it easier to centre - Caroline Elisa 2012-04-03 20:33


You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;


<div class="anchorContainer">
    <a href="#">text</a>

<div class="anchorContainer">
    <a href="#">text</a>

<div class="anchorContainer">
    <a href="#">text</a>
2012-04-03 20:20
by Khan
Thanks Jeff, but Cadence got there moments earlier - Caroline Elisa 2012-04-03 20:34
You're welcome! : - Khan 2012-04-03 20:34
@CarolineElisa You should evaluate accepting this answer as it is more elaborate and helped me faster than Cadence's - k0pernikus 2012-06-19 11:06