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

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 http://stackoverflow.com/questions/17721031/css-force-new-line/22925271#22925271 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:

<ul>
    <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>

css:

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.anchorContainer
{
    float:left;
    clear:left;
}

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

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

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

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

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