Question

假设我有这个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/

现在想象一下，我想把它分成三列，相当于在第三列<br>之后注入<li>。 （实际上这样做在语义和语法上都是无效的。）

我知道如何选择CSS中的第三个<li>，但是如何在它之后强制换行？这不起作用：

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

我也知道使用float代替inline-block可能会出现这种情况，但我对使用float的解决方案不感兴趣。我也知道，对于固定宽度的块，可以通过将父ul的宽度设置为该宽度的约3倍来实现;我对这个解决方案不感兴趣。我也知道如果我想要真正的列，我可以使用display:table-cell;我对这个解决方案不感兴趣。我对在内联内容中强制中断的可能性感兴趣。

编辑：要清楚，我对“理论”感兴趣，而不是特定问题的解决方案。 CSS可以在display:inline(-block)?元素的中间注入换行符，还是不可能？如果您确定不可能，那么这是一个可以接受的答案。

Answer 1

我已经能够使它适用于内联LI元素。不幸的是，如果LI元素是内联块，它就不起作用：

现场演示： http://jsfiddle.net/dWkdp/

悬崖笔记版本：

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

Answer 2

您对问题的许多“解决方案”不感兴趣。我认为没有一个好方法可以做你想做的事情。使用:after和content插入的任何内容都具有完全相同的语法和语义有效性，如果您自己在那里编写的话。

工具CSS提供工作。如上所述，当你想要开始一个新行时，你应该浮动li然后clear: left：

查看示例：http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Answer 3

当允许重写html时，您可以在<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>

Answer 4

将列表拆分为行的简单方法是将各个列表项浮动，然后将要转到下一行的项清除浮动。

例如

<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>

Answer 5

我知道你不想使用花车而问题只是理论，但万一有人觉得这很有用，这里有一个使用花车的解决方案。

在您想要浮动的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一样工作。

Answer 6

我通过为行中的第一个内联元素创建一个:: before选择器，并使该选择器成为一个具有顶部或底部边距的块来稍微分隔行来实现此目的。

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

Answer 7

请注意，这将起作用，具体取决于您渲染页面的方式。但是，如何开始一个新的无序列表呢？

即

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

Answer 8

更好的解决方案是使用-webkit-columns：2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

Answer 9

也许它只有CSS完全可能，但我更愿意避免＆＃34;浮动＆＃34;尽我所能，因为它干扰了父母的身高。

如果你正在使用jQuery，你可以创建一个类似于`wrapAll`的简单`wrapN`插件，除了它只包装＆＃34; N＆＃34;元素，然后打破和包装下一个＆＃34; N＆＃34;使用循环的元素。然后将您的包装器类设置为`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/

CSS在特定`inline-block`项之前/之后换行

9 个答案:

演示