9
特定の「インラインブロック」アイテムの前/後に改行するCSS
私がこの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> そしてこのCSS： li { text-align:center; display:inline-block; padding:0.1em 1em } img { width:64px; display:block; margin:0 auto } 結果はここで見ることができます：http : //jsfiddle.net/YMN7U/1/ これを3つの列に分割したいとします<br>。3番目の列の後にaを注入するのと同じこと<li>です。（実際にそれを行うと、意味的および構文的に無効になります。） <li>CSSで3番目を選択する方法を知っていますが、その後に改行を強制するにはどうすればよいですか？これは動作しません： li:nth-child(4):after { content:"xxx"; display:block } この特定のケースがのfloat代わりにを使用して可能であることも知っていますがinline-block、を使用したソリューションには興味がありませんfloat。また、固定幅ブロックでは、親の幅をulその幅の約3倍に設定することでこれが可能であることも知っています。このソリューションには興味がありません。また、display:table-cell実際の列が必要な場合に使用できることも知っています。このソリューションには興味がありません。インラインコンテンツ内で強制的に中断する可能性に興味があります。 編集：明確にするために、私は特定の問題の解決策ではなく、「理論」に興味があります。CSSはdisplay:inline(-block)?要素の途中で改行を挿入できますか、それとも不可能ですか？不可能だと確信しているなら、それは許容できる答えです。