31

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.

5

4 Answers 4

62

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;
}
2
  • 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
    May 8, 2016 at 16:22
  • If you want to revert the effect, you can use display:inline; (for example in a media query). Oct 11, 2018 at 8:26
34

How about with a :before pseudoelement:

a:before {
  content: '\a';
  white-space: pre;
}
4
  • 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, 2014 at 3:54
  • 2
    Loved your solution, even if I had a different problem than the one described here, Thank you!
    – Matteo
    Sep 29, 2014 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, 2016 at 0:55
  • 2
    In case someone wonders (like I did): The \a renders as a newline, see stackoverflow.com/a/33332670
    – bleistift2
    Apr 14, 2018 at 15:17
1

or you can use:

a {
    display: inline-block;
  }
1
  • 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. Jun 16, 2014 at 11:05
0

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>

Try

5
  • 1
    @PatsyIssa: Yes, But i didn't see them when post.
    – Ishan Jain
    Jul 18, 2013 at 10:47
  • should be <br/> or <br>
    – alxndr
    Apr 8, 2014 at 0:28
  • 1
    @alxndr: Yes, you are right, there are some HTML syntax mistake. Please see updated answer. Thanks for your suggestions. :)
    – Ishan Jain
    Apr 9, 2014 at 10:01
  • 2
    Try avoid styling with markup, like <br />. I'd use the above answers using the display property.
    – veritascs
    Apr 25, 2014 at 20:53
  • @veritascs: Yes, it's not a good approach to use markup for putting styling purposes.
    – Ishan Jain
    Apr 26, 2014 at 1:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.