To add a line break before/after a certain ‘inline-block’ item, use CSS.

Problem

Assume I have the following HTML:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

and this CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

You can see the outcome here: http://jsfiddle.net/YMN7U/1/

Assume I want to split this into three columns, which I can do by inserting a br> after the third li>. (Doing so would be both semantically and syntactically incorrect.)

In CSS, I understand how to choose the third li>, but how do I force a line break after it? This is ineffective:

li:nth-child(4):after { content:"xxx"; display:block }

I’m also aware that this scenario can be solved by using float instead of inline-block, but I’m not interested in float-based solutions. I’m also aware that with fixed-width blocks, this can be accomplished by setting the parent ul’s width to around 3x the block’s width; but, I’m not interested in this option. I’m also aware that if I needed genuine columns, I could use display:table-cell; but, I’m not interested in this approach. I’m intrigued by the idea of imposing a break within inline information.

To be clear, I’m interested in ‘theory’ rather than a solution to a specific problem. Is it possible to use CSS to insert a line break in the middle of a display:inline(-block)? Is it possible to combine elements, or is it impossible? That is an acceptable response if you are certain it is impossible.

Asked by Phrogz

Solution #1

I was able to get it to work with inline LI components. Unfortunately, if the LI components are inline-block, it will not work:

Live demo: http://jsfiddle.net/dWkdp/

Alternatively, here’s the cliff notes version:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

Answered by Šime Vidas

Solution #2

You’re not looking for many “solutions” to your situation. There isn’t a good way to do what you want to do, in my opinion. Anything you put in using:after and content has the same syntactic and semantic validity as if you wrote it yourself.

CSS is a set of tools that allows you to do job. When you want to start a new line, you should just float the lis and then clear: left, as you mentioned:

See http://jsfiddle.net/marcuswhybrow/YMN7U/5/ for an example.

Answered by Marcus Whybrow

Solution #3

When altering HTML is permitted, you can nest ul>s within ul>s and just display the inner li>s as inline-block. This would also make sense logically, in my opinion, because the grouping is represented in the html.

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

li li { display:inline-block; }

Answered by fabb

Solution #4

Floating individual list items and then clearing the float for the item you want to go to the next line is an easy technique to split lists into rows.

for example

<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

Answered by matt

Solution #5

I understand you didn’t want to use floats, as the question was only theoretical, but here’s a solution that uses floats.

To make your li elements float, give them the class left:

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

and make the following CSS changes:

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 it works with Internet Explorer 6 and up.

Answered by chut319

Post is based on https://stackoverflow.com/questions/4609279/css-to-line-break-before-after-a-particular-inline-block-item