CSS line break after n list item `inline-block`

Question

I have a problem to add a line break after a N (3 for example) elements of a list: I have tried to do like this Q/A solution (using :nth-child(3):after { content:"\A"; white-space:pre; }) tells but id didn't work for me.

Here is my 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;
}

Here is a plunker The code is done in angular but the problem is a css one.

Here is one of the list element : <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}"> </li>

Thanks in advance,

There's no list element in your plunker, how did you try the solution you mentioned? — Daniel, Apr 28 '15 at 20:16
I don't see any angular or `li` elements in the plunkr either — floribon, Apr 28 '15 at 20:22
I'm sorry it's my fault it was the wrong plunker. It's fine now — Master Mind, Apr 28 '15 at 20:24
Check out the 2nd answer [here](http://stackoverflow.com/questions/17768902/how-to-insert-new-line-within-ng-repeat-of-the-middle-angularjs-twitter-boots), suggests using `
` — Daniel, Apr 28 '15 at 20:48

score 1 · Accepted Answer · answered Apr 28 '15 at 20:55

The problem stems from css's nth child selector and the display: inline-block/block combination.

You may want a CSS fix for this, and I'm sure it exists, but this also works. It's up to you if you're that concerned about the inline conditional.

I made this span a few lines so people wouldn't have to scroll to see the code that fixes it.

This was fixed via one change in your template:

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

enter image description here

score 1 · Answer 2 · answered Apr 28 '15 at 21:11

1

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

pseudo properties like ':after' won't work

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

answered Apr 28 '15 at 21:11

Chinmay Chiranjeeb

61
4

CSS line break after n list item `inline-block`

2 Answers2