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.

• Bertine: I am not sure what you are doing but what is the reason to using display:inline instead of float?

Answer 1

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

• Pekka: 1. Because I need to center them in a wide <ul>. 2. Good idea, will try out. 3. Probably true. :)

Answer 2

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.

• Pekka: Won't both work, as the list elements are centered in a 100% wide UL.
• user151323: Make UL fixed width and center it. float:left | right will make LIs to be aligned to the left or right, so it may not achieve the needed effect if your UL is 100% wide.

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.