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

Question

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.

Maybe http://stackoverflow.com/questions/17721031/css-force-new-line/22925271#22925271 helps? — alxndr, Apr 08 '14 at 00:06

score 31 · Accepted Answer · edited Mar 17 '16 at 09:48

31

Have you tried float:left; clear:left ?

edited Mar 17 '16 at 09:48

Sangram Nandkhile

15,287
17
75
111

answered Apr 03 '12 at 20:18

Ricardo Castañeda

5,318
6
25
38

score 5 · Answer 2 · answered Apr 03 '12 at 20:19

5

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.

answered Apr 03 '12 at 20:19

David Nguyen

7,953
2
27
49

Thanks for the quick response David, but I avoided using a list to make it easier to centre. – Caroline Elisa Apr 03 '12 at 20:33

score 4 · Answer 3 · answered Apr 03 '12 at 20:20

4

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>

answered Apr 03 '12 at 20:20

Khan

16,500
3
42
57

Thanks Jeff, but Cadence got there moments earlier! – Caroline Elisa Apr 03 '12 at 20:34
1

@CarolineElisa You should evaluate accepting this answer as it is more elaborate and helped me faster than Cadence's. – k0pernikus Jun 19 '12 at 11:06

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

3 Answers3