CSS to line break before after a particular inline-block item

Question

Let s say I have this HTML    lt h3 gt Features lt  h3 gt   lt ul gt       lt li gt  lt img src  alphaball png  gt Smells Good lt  li gt       lt li gt  lt img src  alphaball png  gt Tastes Great lt  li gt       lt li gt  lt img src  alphaball png  gt Delicious lt  li gt       lt li gt  lt img src  alphaball png  gt Wholesome lt  li gt       lt li gt  lt img src  alphaball png  gt Eats Children lt  li gt       lt li gt  lt img src  alphaball png  gt Yo  Mama lt  li gt   lt  ul gt    and this CSS   li   text-align center  display inline-block  padding 0 1em 1em   img   width 64px  display block  margin 0 auto     The result can be seen here  http   jsfiddle net YMN7U 1   Now imagine that I want to break this into three columns  the equivalent of injecting a  lt br gt  after the third  lt li gt    Actually doing that would be semantically and syntactically invalid    I know how to select the third  lt li gt  in CSS  but how do I force a line break after it  This does not work   li nth-child 4  after   content  xxx   display block     I also know that this particular case is possible by using float instead of inline-block  but I am not interested in solutions using float  I also know that with fixed-width blocks this is possible by setting the width on the parent ul to about 3x that width  I am not interested in this solution  I also know that I could use display table-cell if I wanted real columns  I am not interested in this solution  I am interested in the possibility of forcing a break inside inline content   Edit  To be clear  I am interested in  theory   not the solution to a particular problem  Can CSS inject a line break in the middle of display inline -block   elements  or is it impossible  If you are certain that it is impossible  that is an acceptable answer

User · Answer

Maybe it s is completely possible with only CSS but I prefer to avoid  float  as much as I can because it interferes with it s parent s height   If you are using jQuery  you can create a simple  wrapN  plugin that is similar to  wrapAll  except it only wraps  N  elements and then breaks and wraps the next  N  elements using a loop  Then set your wrappers class to  display  block      function             fn wrapN   function  wrapper  n  start            if  wrapper     undefined    n     undefined  return false          if  start     undefined  start   0          for  var i   start  i  lt    this  size    i    n               this  slice i  i   n  wrapAll wrapper           return this           jQuery          document  ready function             li   wrapN   lt span class  break    gt    3           Here is a JSFiddle of the finished product   http   jsfiddle net dustinpoissant L79ahLoz

User · Answer

I ve been able to make it work on inline LI elements  Unfortunately  it does not work if the LI elements are inline-block   Live demo  http   jsfiddle net dWkdp   Or the cliff notes version   li         display  inline     li nth-child 3  after         content    A        white-space  pre

User · Answer

You are not interested in a lot of  solutions  to your problem  I do not think there really is a good way to do what you want to do  Anything you insert using  after and content has exactly the same syntactic and semantic validity it would have done if you had just written it in there yourself   The tools CSS provide work  You should just float the lis and then clear  left when you want to start a new line  as you have mentioned   See an example  http   jsfiddle net marcuswhybrow YMN7U 5

User · Answer

I know you didn t want to use floats and the question was just theory but in case anyone finds this useful  here s a solution using floats   Add a class of left to your li elements that you want to float    lt li class  left  gt  lt img src  http   phrogz net tmp alphaball png  gt Smells Good lt  li gt    and amend your CSS as follows   li   text-align center  float  left  clear  left  padding 0 1em 1em    left  float  left  clear  none     http   jsfiddle net chut319 xJ3pe   You don t need to specify widths or inline-blocks and works as far back as IE6

User · Answer

When rewriting the html is allowed  you can nest  lt ul gt s within the  lt ul gt  and just let the inner  lt li gt s display as inline-block  This would also semantically make sense IMHO  as the grouping also is reflected within the html      lt ul gt       lt li gt           lt ul gt               lt li gt Item 1 lt  li gt               lt li gt Item 2 lt  li gt               lt li gt Item 3 lt  li gt           lt  ul gt       lt  li gt       lt li gt           lt ul gt               lt li gt Item 4 lt  li gt               lt li gt Item 5 lt  li gt               lt li gt Item 6 lt  li gt           lt  ul gt       lt  li gt   lt  ul gt      li li   display inline-block        Demo   x000D   x000D    function        img   attr  src    http   phrogz net tmp alphaball png        x000D  h3   x000D    border-bottom  1px solid  ccc  x000D    font-family  sans-serif  x000D    font-weight  bold  x000D    x000D  ul   x000D    margin  0 5em auto  x000D    list-style-type  none  x000D    x000D  li li   x000D    text-align  center  x000D    display  inline-block  x000D    padding  0 1em 1em  x000D    x000D  img   x000D    width  64px  x000D    display  block  x000D    margin  0 auto  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt h3 gt Features lt  h3 gt  x000D   lt ul gt  x000D     lt li gt  x000D       lt ul gt  x000D         lt li gt  lt img   gt Smells Good lt  li gt  x000D         lt li gt  lt img   gt Tastes Great lt  li gt  x000D         lt li gt  lt img   gt Delicious lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt ul gt  x000D         lt li gt  lt img   gt Wholesome lt  li gt  x000D         lt li gt  lt img   gt Eats Children lt  li gt  x000D         lt li gt  lt img   gt Yo  Mama lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

An easy way to split lists into rows is by floating the individual list items and then the item that you want to go to the next line you can clear the float   for example   lt li style  float  left  display  inline-block  gt  lt  li gt   lt li style  float  left  display  inline-block  gt  lt  li gt   lt li style  float  left  display  inline-block  gt  lt  li gt    lt li style  float  left  display  inline-block  clear  both  gt  lt  li gt  --- this will start on a new line  lt li style  float  left  display  inline-block  gt  lt  li gt   lt li style  float  left  display  inline-block  gt  lt  li gt

User · Answer

A better solution is to use -webkit-columns 2    http   jsfiddle net YMN7U 889    ul   margin 0 5em auto  -webkit-columns 2

User · Answer

Note sure this will work  depending how you render the page   But how about just starting a new unordered list   i e    x000D   x000D   lt ul gt  x000D   lt li gt  x000D   lt li gt  x000D   lt li gt  x000D   lt  ul gt  x000D   lt  -- start a new ul to line break it -- gt  x000D   lt ul gt  x000D   x000D   x000D

User · Answer

I accomplished this by creating a   before selector for the first inline element in the row  and making that selector a block with a top or bottom margin to separate rows a little bit      1st item  before     content       display block    margin-top  5px      1st item     color orange    font-weight  bold    margin-right  1em      2nd item     color  blue

[html] CSS to line break before/after a particular `inline-block` item

Examples related to html

Examples related to css