OscarGuy OscarGuy - 2 months ago 6
CSS Question

Can you skip a line within a ul list?

I have an unordered list of multiple items. I want to put in a line break between sections in the list without breaking the

ul
group? Is this possible?

Let's say it looks like this:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>


So, let's say that visually I want the list to display with a line-break between items 3 and 4 or between items 7 and 8. Is there a way to insert an LI item that's blank that acts as a line-break without it displaying a bullet point?

Answer

You can use list-style:none on a <li> with a non breaking space.

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li style="list-style:none;">&nbsp;</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>