CSS在特定的`inline-block`项目之前/之后进行换行
比方说，我有这个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/
现在想象一下，我想把它分成三列，相当于在第三个<li>之后注入一个<br> 。 （实际上，这样做在语义和语法上都是无效的。）
我知道如何在CSS中select第三个<li> ，但是如何在它之后强制换行？ 这不起作用：
li:nth-child(4):after { content:"xxx"; display:block }
我也知道这个特殊的情况是可以通过使用float而不是inline-block ，但是我对使用float解决scheme不感兴趣。 我也知道，使用固定宽度块可以通过将父ul的宽度设置为该宽度的3倍来实现， 我对这个解决scheme不感兴趣。 我也知道，如果我想要真正的列，我可以使用display:table-cell ; 我对这个解决scheme不感兴趣。 我感兴趣的是强行内嵌内容的可能性。
编辑 ：为了清楚起见，我对“理论”感兴趣，而不是对特定问题的解决scheme。 CSS可以在display:inline(-block)?中间插入一个换行符display:inline(-block)? 元素，还是不可能？ 如果你确定这是不可能的，那是一个可以接受的答案。
我已经能够使它在内联LI元素上工作。 不幸的是，如果LI元素是内嵌块，它不起作用：
现场演示： http : //jsfiddle.net/dWkdp/
或悬崖笔记版本：
li { display: inline; } li:nth-child(3):after { content: "\A"; white-space: pre; }
你对你的问题很多“解决scheme”不感兴趣。 我不认为真的有一个很好的方法去做你想做的事情。 您插入的任何content :after和content具有完全相同的句法和语义效度，如果您自己将它们写在那里，就会做到这一点。
CSS提供的工具。 你应该漂浮li ，然后clear: left当你想要开始一个新的行，如你所说的：
看一个例子： http : //jsfiddle.net/marcuswhybrow/YMN7U/5/
将列表拆分成行的一种简单方法是通过浮动单个列表项目，然后将要去到下一行的项目，您可以清除浮动。
例如
<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>
当允许重写html时，可以在<ul>嵌套<ul> <ul>并让内部的<li>显示为内嵌块。 这也将语义上有意义恕我直言，因为分组也反映在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; }
演示
$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });
h3 { border-bottom: 1px solid #ccc; font-family: sans-serif; font-weight: bold; } ul { margin: 0.5em auto; list-style-type: none; } li li { text-align: center; display: inline-block; padding: 0.1em 1em; } img { width: 64px; display: block; margin: 0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h3>Features</h3> <ul> <li> <ul> <li><img />Smells Good</li> <li><img />Tastes Great</li> <li><img />Delicious</li> </ul> </li> <li> <ul> <li><img />Wholesome</li> <li><img />Eats Children</li> <li><img />Yo' Mama</li> </ul> </li> </ul>
我知道你不想使用浮动，问题只是理论，但如果有人发现这个有用的，这是一个使用浮动的解决scheme。
添加一个左边的类到你想浮动的li元素：
<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>
并修改你的CSS如下：
li { text-align:center; float: left; clear: left; padding:0.1em 1em } .left {float: left; clear: none;}
http://jsfiddle.net/chut319/xJ3pe/
您不需要指定宽度或内联块，并且可以在IE6之前工作。
也许只有CSS才是完全可能的，但我更愿意尽可能地避免“浮动”，因为它干扰了父母的身高。
如果你正在使用jQuery，你可以创build一个简单的`wrapN`插件，它类似于`wrapAll`，除了它只包装“N”个元素，然后使用一个循环中断和包装下一个“N”元素。 然后将你的包装类设置为`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 < $(this).size(); i += n) $(this).slice(i, i + n).wrapAll(wrapper); return this; }; }(jQuery));
$(document).ready(function () { $("li").wrapN("<span class='break' />", 3); });
这是成品的JSFiddle：
更好的解决scheme是使用-webkit-columns：2;
http://jsfiddle.net/YMN7U/889/
ul { margin:0.5em auto; -webkit-columns:2; }
