CSS在特定`inline-block`项目之前/之后的换行符 [英] CSS to line break before/after a particular `inline-block` item

问题描述

假设我有这个HTML：

Let's say I have this 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/

The result can be seen here: http://jsfiddle.net/YMN7U/1/

现在想象一下，我想将其分解为三栏，相当于在第三个< li> 之后注入< br>

Now imagine that I want to break this into three columns, the equivalent of injecting a <br> after the third <li>. (Actually doing that would be semantically and syntactically invalid.)

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

I know how to select the third <li> in CSS, but how do I force a line break after it? This does not work:

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

我也知道这种特殊情况可能通过使用 float 而不是 inline-block ，但我不感兴趣的解决方案使用 float 。我也知道对于固定宽度的块，这是可能的，通过将父 ul 的宽度设置为约宽度的3倍;我对这个解决方案不感兴趣。我也知道，如果我想要真正的列，我可以使用 display：table-cell 我对这个解决方案不感兴趣。我对在内嵌内容中强行休息的可能性感兴趣。

I also know that this particular case is possible by using float instead of inline-block, but I am not interested in solutions using float. I also know that with fixed-width blocks this is possible by setting the width on the parent ul to about 3x that width; I am not interested in this solution. I also know that I could use display:table-cell if I wanted real columns; I am not interested in this solution. I am interested in the possibility of forcing a break inside inline content.

编辑： 理论，而不是解决一个特定的问题。 如果你确定，在 display：inline（-block）？这是不可能的，这是一个可以接受的答案。

Edit: To be clear, I am interested in 'theory', not the solution to a particular problem. Can CSS inject a line break in the middle of display:inline(-block)? elements, or is it impossible? If you are certain that it is impossible, that is an acceptable answer.

推荐答案

我已经能够使其在内联LI元素。不幸的是，如果LI元素是inline-block，则无效：

I've been able to make it work on inline LI elements. Unfortunately, it does not work if the LI elements are inline-block:

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

Live demo: http://jsfiddle.net/dWkdp/

或者cliff notes版本：

Or the cliff notes version:

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

这篇关于CSS在特定`inline-block`项目之前/之后的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！