CODEWITHSUNDEEP
htmlcss
Pekka
Pekka

Reputation: 449703

Line break through CSS property?

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.

Upvotes: 2

Views: 1638

Answers (6)

Ms2ger
Ms2ger

Reputation: 15993

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

works for me.

Upvotes: 0

Eimantas
Eimantas

Reputation: 49354

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

Upvotes: 3

Bertine
Bertine

Reputation: 630

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

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82513

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

Upvotes: 0

keithjgrant
keithjgrant

Reputation: 12759

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.

Upvotes: 0

user151323
user151323

Reputation:

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.

Upvotes: 2

Related Questions