相关疑难解决方法(0)

假设我有这个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>.(实际上这样做在语义和语法上都是无效的.)

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

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

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

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

我觉得我看到了一种方法,使用CSS内容属性,在元素之前插入换行标记.显然这不起作用:

#restart:before { content: '<br/>'; }

但是你怎么做的？

我无法访问页面的HTML或PHP,只能通过CSS进行编辑.我一直在对网站进行修改并通过::after或者::before伪元素添加文本,并且发现转义Unicode应该用于诸如添加内容之前或之后的空格之类的东西.

如何在content属性中添加多行？

在示例中,HTML break行元素仅用于显示我想要实现的内容:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

我有以下 CSS：

header h1:after {
    content:"Alumni Association";
}

我希望它显示如下：

校友

协会

我试过\a, \n, <br>等，但没有一个工作。

我正在寻找一个纯粹的 CSS 解决方案，因为这是我可以访问的所有内容...