Line break through CSS property?

Question

In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?

Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.

to clarify:

I need them "display: inline" because I may need to center them within the UL

I need only some of the elements to have a line break.

Answer 1

You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.

Alternatively, float:right and clear:right will do a similar thing.

Answer 2

1. Why do you use display:inline?
2. display: list-item; does exactly what you need (which is default for li)

Answer 3

Do you want a "line break" after each <li> or just after a few certain ones?

For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.

For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.

Answer 4

Try putting display:block; on the particular <li> that you want on the next line.

Answer 5

You could try and use the :after pseudo-element but I haven't played with it much.

Answer 6

li.class:after { content: "\a"; white-space: pre; }

works for me.