Databases
StackOverflow2013
Postsdbo
POCSS to line break before/after a particular `inline-block` item
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS to line break before/after a particular `inline-block` item
    text
    copied!<p>Let's say I have this HTML:</p> <pre><code>&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; </code></pre> <p>and this CSS:</p> <pre><code>li { text-align:center; display:inline-block; padding:0.1em 1em } img { width:64px; display:block; margin:0 auto } </code></pre> <p>The result can be seen here: <a href="http://jsfiddle.net/YMN7U/1/" rel="noreferrer">http://jsfiddle.net/YMN7U/1/</a></p> <p>Now imagine that I want to break this into three columns, the equivalent of injecting a <code>&lt;br&gt;</code> after the third <code>&lt;li&gt;</code>. <em>(Actually doing that would be semantically and syntactically invalid.)</em></p> <p>I know how to select the third <code>&lt;li&gt;</code> in CSS, but how do I force a line break after it? This does not work:</p> <pre><code>li:nth-child(4):after { content:"xxx"; display:block } </code></pre> <p><em>I also know that this particular case is possible by using <code>float</code> instead of <code>inline-block</code>, but I am not interested in solutions using <code>float</code>. I also know that with fixed-width blocks this is possible by setting the width on the parent <code>ul</code> to about 3x that width; I am not interested in this solution. I also know that I could use <code>display:table-cell</code> 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.</em></p> <p><strong>Edit</strong>: To be clear, I am interested in 'theory', not the solution to a particular problem. <em>Can CSS inject a line break in the middle of <code>display:inline(-block)?</code> elements, or is it impossible?</em> If you are certain that it is impossible, that is an acceptable answer.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload