How to make a line break in ul?

<li>line break<li> - break with text only
<br> - not allowed in validator
<li><br><li> also not allowed
<li><li> - no break

So want something <br> but valid any idea?


Use CSS to add padding. Give certain li elements a different class, and you can give them a different top (or bottom) padding.

The problem is the validator. It will fail, yes, because the only children of ul are li tags. It’s a semantic thing.

1 Like

You can style it in CSS.

No need, just target them with :nth-child.


Also, remember you need a closing tag whenever you end a list item, like </li>

1 Like

Is oldschool way?


Nth child is effective when the position of the given element won’t change.

Something like:

ul> li:nth-child(3) {
    background: red;


absolutely. Would work great.

1 Like

Yeah, shouldn’t be problem with lists.
Although I still don’t see why he wants to manually insert a line break, and I think it’s due to him not closing the list items properly.

You may be right. In that case, then :nth-child thing will bit the OP inna butt.

You know I think first br is fine in ul and what that easy way … With nth-child a bit complicated than insert a easy br so :slight_smile: but still think about that in set ul after li and close ul and after that a br and again ul hmm

The modernest way ever is this:

ul:empty + .empty-state {
  display: block;

So make an empty-state div after ul and you got a break.

Try putting the entire ul inside an external li.