HTML Li Element List Items Should Not Make a Horizontal Layout Inside a Vertical Layout

You’ve compiled a list and formatted it into ul and li elements. You expected the li elements to be laid out as a vertical list because they usually are. But some list items are appearing together on one line, and that’s going to confuse readers. Now what?

The problem occurs with short list items, so short that one list item has room to its right for the next list item. I’m told that’s how the HTML specification wants it, so I don’t expect it to be amended.

Further analysis found that I had assigned inline-block, padding, float left or right, and clear both using CSS (for another reason).

I made a kludgy solution. Add a line break after each list item, like this:

<ul>

</ul>

Adding it only to short lines might not work as well, so add it to all of the end li tags, after the tag. That’s also helpful for visitors who have wide screens and long lines of text.

You might expect the br element to skip a line, but it doesn’t. At least it doesn’t on my websites, even for long list items, but if it does on yours, add a class to the br element (like class="li-forcelinebreak") and style it.

The slash in the br element is not needed, but I think it makes the code more readable later, so I add it.