How to make a line break in ul?

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

So want something <br> but valid any idea?

Thanks

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.

/edit

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

1 Like

Is oldschool way?


<li>&nbsp;<li>

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

Something like:

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

Right?

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.