CSS force new line

Question

I have something like this:

<li>Post by <a>Author</a></li>

And I want to display the link in a new line, like this

Post by
Author

How can I achieve this? Clear:left doesn't work.

Possible duplicate of http://stackoverflow.com/q/1672879/1111052 — muneebShabbir, Jul 18 '13 at 10:42
This is created by a plugin, if I could use a breakline, I wouldnt ask. Display:block doesnt work. — Sebastian Starke, Jul 18 '13 at 10:58

score 61 · Accepted Answer · edited Apr 08 '14 at 00:47

61

Use the display property

a{
    display: block;
}

This will make the link to display in new line

If you want to remove list styling, use

li{
    list-style: none;
}

edited Apr 08 '14 at 00:47

Stephen P

answered Jul 18 '13 at 10:37

Shiva Avula

I have already made the link look like a button, and using `display:block;` makes the button too wide. How can I force the link to a new line while maintaining its width? – Levi Johansen May 08 '16 at 16:22
If you want to revert the effect, you can use `display:inline;` (for example in a media query). – Fabian von Ellerts Oct 11 '18 at 08:26

alxndr · Answer 2 · 2014-04-08T00:27:50.907

34

How about with a :before pseudoelement:

a:before {
  content: '\a';
  white-space: pre;
}

edited Apr 08 '14 at 00:27

answered Apr 08 '14 at 00:06

alxndr

1

This is great for situations in which you want to put an anchor element on a new line, but not have its clickable area take up the entire line's width. – KOVIKO Jun 27 '14 at 03:54
2

Loved your solution, even if I had a different problem than the one described here, Thank you! – Matteo Sep 29 '14 at 10:39
2

This is a great solution, thank you. Solved one of those problems where the client requests something outrageous and you just gotta do it! – Galaxy Nov 24 '16 at 00:55
2

In case someone wonders (like I did): The `\a` renders as a newline, see https://stackoverflow.com/a/33332670 – bleistift2 Apr 14 '18 at 15:17

score 2 · Answer 3 · answered Apr 22 '14 at 10:21

2

or you can use:

a {
    display: inline-block;
  }

answered Apr 22 '14 at 10:21

Ya Basha

this will display on the same line... the question refers to a 'new line', in which case either inline or block will work. inline-block will attempt to place on the same vertical axis. – josh.thomson Jun 16 '14 at 11:05

Ishan Jain · Answer 4 · 2014-04-09T09:56:53.253

1

Use <br /> OR <br> -

<li>Post by<br /><a>Author</a></li>

OR

<li>Post by<br><a>Author</a></li>

or

make the a element display:block;

<li>Post by <a style="display:block;">Author</a></li>

edited Apr 09 '14 at 09:56

answered Jul 18 '13 at 10:38

Ishan Jain

1

@PatsyIssa: Yes, But i didn't see them when post. – Ishan Jain Jul 18 '13 at 10:47
should be `
` or `
` – alxndr Apr 08 '14 at 00:28
1

@alxndr: Yes, you are right, there are some HTML syntax mistake. Please see updated answer. Thanks for your suggestions. :) – Ishan Jain Apr 09 '14 at 10:01
2

Try avoid styling with markup, like
. I'd use the above answers using the display property. – veritascs Apr 25 '14 at 20:53
@veritascs: Yes, it's not a good approach to use markup for putting styling purposes. – Ishan Jain Apr 26 '14 at 01:48

4 Answers4