CSS 在特定“内联块”项目之前/之后换行答案

【问题标题】：CSS to line break before/after a particular `inline-block` itemCSS 在特定“内联块”项目之前/之后换行
【发布时间】：2011-06-04 07:15:31
【问题描述】：

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

我也知道这种特殊情况可以通过使用float 而不是inline-block，但我对使用float 的解决方案不感兴趣。我也知道，对于固定宽度的块，可以通过将父 ul 上的宽度设置为该宽度的 3 倍左右；我对这个解决方案不感兴趣。我也知道如果我想要真正的专栏，我可以使用display:table-cell；我对这个解决方案不感兴趣。我对强制中断内联内容的可能性感兴趣。

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

【问题讨论】：

将第一个三个和第二个三个放在两个不同的列表中？我假设你不想这样做，但我想我会把它扔在那里。
看来您需要告诉我们您在这里真正想要实现的目标，以便有人可以推荐最佳方法。您排除的所有选项都可以解决您遇到的问题，为什么需要另一个解决方案？
@Jake 事实上，我在做我所说的：使用元素的语义列表并希望在特定元素之后换行。在实践中，我设置了容器的宽度，但这仅适用于我的特定情况，因为这些项目恰好是相同的宽度，我希望它们以一致的边缘包裹。情况可能并非总是如此。我“真正想要实现” 是了解 CSS 是否可以在内联流中间强制换行。自信的回答“这绝对不可能”是可以接受的（如果正确的话）。

标签： html css

【解决方案1】：

请注意，这将起作用，具体取决于您呈现页面的方式。但是开始一个新的无序列表怎么样？

即

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

【讨论】：

这会导致可访问性问题。

【解决方案2】：

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

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

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

.2nd_item
{
  color: blue;
}

【讨论】：

【解决方案3】：

我已经能够使它在内联 LI 元素上工作。不幸的是，如果 LI 元素是 inline-block，它就不起作用：

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

或悬崖笔记版本：

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

【讨论】：

Sime，为什么“\A”没有打印出来？我用:after 尝试过的所有内容总是打印为纯文本。
@JMCCreative 那是 ASCII 0x0A，也就是 LF（换行）字符。见w3.org/TR/CSS2/syndata.html#strings
@JMC \A 是换行符...这是一个转义符
@JMC 官方规范：w3.org/TR/CSS21/syndata.html#strings Sitepoint：reference.sitepoint.com/css/content
在这里评论，因为我每隔几个月就会回到这个问题......它不适用于 inline-block 因为你正在添加换行符，它就像一个块容器中的一个内联上下文。如果您可以通过在
之间插入换行符来打破上下文，那么它将起作用。真的很遗憾，因为这对于响应式设计断点很有用。我想大多数时候“内联”与列表的内联块一样有用

【解决方案4】：

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

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

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

【讨论】：

对于某些用例，这可能是一个合理的解决方案。在这种情况下，这不是一个好的解决方案，因为它完全将内容重新排序为先向下而不是再向下。
谁愿意做一个只能在少数浏览器中运行的网络应用程序？

【解决方案5】：

当允许重写 html 时，您可以将 <ul>s 嵌套在 <ul> 中，并让内部的 <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; }

演示

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

【讨论】：

【解决方案6】：

也许仅使用 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/

【讨论】：

【解决方案7】：

我知道你不想使用浮点数，问题只是理论，但如果有人觉得这很有用，这里有一个使用浮点数的解决方案。

为你想要浮动的li元素添加一个left类：

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

【讨论】：

【解决方案8】：

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

例如

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

【讨论】：

您应该注意到float 设置覆盖了inline-block 设置。它们并没有真正共存
如果你使用 text-aling: center;它不起作用（浮动会破坏它）

【解决方案9】：

您对很多问题的“解决方案”不感兴趣。我不认为真的有一个好方法来做你想做的事。您使用 :after 和 content 插入的任何内容都具有与您自己在其中编写时完全相同的句法和语义有效性。

CSS 提供工作的工具。正如您所提到的，当您想开始新行时，您应该只浮动lis 然后clear: left：

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

【讨论】：

OP 对您的解决方案不感兴趣 :)
好吧，使用:after 做的任何事情在语法上都是有效的或一个好主意，因为已经有工具可以做到这一点。这就是答案。
不使用浮点数的一个原因是没有 float: center 这样的东西。
plus inline-block 允许浮动不能进行的各种垂直对齐
“使用 :after 插入的任何内容和内容都具有完全相同的句法和语义有效性” - 迟到了，但我完全不同意这一点 - 使用 :before 和 :after 的全部意义就是能够插入不干扰Html语义的样式。