列表项“内联块”后的CSS换行符

Question

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

这是我的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问题。

以下是list元素之一： <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>

提前致谢，

Answer 1

问题源于css的第n个子选择器和display：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>',

Answer 2

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

像'：after'之类的伪属性将不起作用

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