n个列表项`inline-block`后的CSS换行符答案

【问题标题】：CSS line break after n list item `inline-block`n个列表项`inline-block`后的CSS换行符
【发布时间】：2015-07-07 20:30:23
【问题描述】：

我在列表的 N 个（例如 3 个）元素之后添加换行符时遇到问题：我试图这样做 Q/A 解决方案（使用 :nth-child(3):after { content:"\A"; white-space:pre; }）告诉但 id 不起作用我。

这是我的 CSS

.lk-color-chooser {
 list-style-type: none;
 padding-left: 0;
}
.lk-color-chooser__color {
 display: inline-block;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 margin-right: 5px;
 cursor: pointer;
 opacity: 0.5;
 filter: alpha(opacity=50);
}
.lk-color-chooser__color:hover,
.lk-color-chooser__color.selected {
 opacity: 1;
 filter: alpha(opacity=100);
 }
.lk-color-chooser__color:last-child {
 margin-right: 0;
}

这是plunker 代码是用角度完成的，但问题是 css 的。

这是列表元素之一： <li class="lk-color-chooser__color ng-scope ng-isolate-scope" style="background-color: #72C2FF" ng-repeat="color in colors track by $index" color="color" ng-class="{'selected': selectedColor == color}">&nbsp;</li>

提前致谢，

【问题讨论】：

您的插件中没有列表元素，您是如何尝试您提到的解决方案的？
该列表是通过角度指令<li class="lk-color-chooser__color" style="background-color: {{ color }}">&nbsp;</li> 生成的，您可以使用 html 检查器查看它。
我在问题中添加了一个示例
我在 plunkr 中也没有看到任何 angular 或 li 元素
对不起，这是我的错，是错误的 plunker。现在好了

标签： javascript html angularjs css

【解决方案1】：

问题源于 css 的第 n 个子选择器和显示：inline-block/block 组合。

您可能需要对此进行 CSS 修复，我确信它存在，但这也有效。如果您担心内联条件，这取决于您。

我把这个跨越了几行，这样人们就不必滚动查看修复它的代码了。

这已通过您的模板中的一项更改得到修复：

template: '<ul class="lk-color-chooser">
              <lk-color  ng-repeat-start="color in colors track by $index" color="color" ng-class="{\'selected\': selectedColor == color}">
              </lk-color>{{$index}}
              <br ng-if="($index + 1) % 3 == 0" ng-repeat-end>
           </ul>',

【讨论】：

【解决方案2】：

ul li:nth-child(3){
color: red;
margin-bottom: 30px;
}

':after' 之类的伪属性不起作用

http://codepen.io/chiranjeeb/pen/waBObM

【讨论】：