CSS force new line

问题:

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.

回答1:

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:

How about with a :before pseudoelement:

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

回答3:

or you can use:

a {
    display: inline-block;
  }

回答4:

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