Question

我想要做的是分解内联块<li>。代码生成，在写入页面之前我无法访问它。由于<li>元素之间没有空格，因此它们不会被拆分，并且在整个页面中都不合理。

我不介意解决方案是基于CSS还是基于Javascript。

我在CSS＆＃39;内容中尝试了各种各样的事情：＆＃39;和＆＃39;之后：＆＃39;。

请查看此小提琴，了解问题的演示：http://jsfiddle.net/2L56N/5/

编辑：结果应该是顶级示例。但是，生成的代码与底部示例类似（标记之间没有空格，导致内联块成为一个）。拖动宽度，只显示2个图像，以查看我正在寻找的对齐效果。

Answer 1

除非我误解了这个问题，否则你可以简单地为li元素添加边距：

ul li {
    display: inline-block;
    margin:5px;
}

http://jsfiddle.net/B7cL9/

Answer 2

您可以使用display:flex;与justify-content:space-between;一起模拟text-align:justify ，当您的内嵌框之间缺少空格这只适用于年轻的浏览器：

ul {
    display:flex;
    justify-content:space-between;
    text-align: justify;/* your code */
}
ul li {
    display: inline-block;/* your code */
}

<强> DEMO

分解内联块元素

2 个答案: