假设我有这样的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中选择第三个<li>，但我如何在它之后强制换行?这行不通:
li:nth-child(4):after { content:"xxx"; display:block }
我也知道这种特殊的情况是可能的使用浮动而不是内联块，但我不感兴趣的解决方案使用浮动。我也知道，对于固定宽度的块，这是可能的，通过设置父ul的宽度约为3倍的宽度;我对这个解决方案不感兴趣。我还知道如果我想要真正的列，我可以使用display:table-cell;我对这个解决方案不感兴趣。我感兴趣的是在内联内容中强制中断的可能性。
编辑:需要澄清的是，我感兴趣的是“理论”，而不是某个特定问题的解决方案。CSS可以在显示的中间注入换行符:inline(-block)?元素，还是不可能?如果你确定这是不可能的，这是一个可以接受的答案。
当重写html被允许时，你可以在<ul>中嵌套<ul>s，并让内部的<li>s显示为内联块。这在语义上也有意义，因为分组也反映在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; }
Demo
$(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>
也许这是完全可能的，只有CSS，但我更喜欢避免“浮动”尽可能多，因为它干扰它的父高度。
如果你正在使用jQuery，你可以创建一个简单的“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:
http://jsfiddle.net/dustinpoissant/L79ahLoz/
