javascript - n 列表项 `inline-block` 后的 CSS 换行符

Question

我在列表的 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代码是用 Angular 完成的，但问题是 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>

提前致谢

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>',