css - 打破新行水平滚动菜单排列，CSS

Question

我有一个显示一组颜色供用户选择的菜单...

问题

我想在 li 数字 23 之后换行....

我尝试使用 .breaker 类，它使用 clear:both; display:block 但它只会向下移动这个单个元素..

我怎样才能得到这个？

.BgPickerMenu {
position: relative;
	width:300px!important;
	overflow:hidden;
    height: 80px;
	background:#fff;
	margin:50px auto 0 auto;
    border: 1px solid red;
}

.BgPickerScroll {
white-space: nowrap;
position: relative;
overflow:auto;  
font-size:0; 
border: 0px solid blue;
}

.BgPickerScroll li{
display:inline-block;
text-align:center;	
cursor:pointer;
font-size:12px;
width: 30px;
height: 30px;
border: 1px solid #E1E8ED;
}

.BgPickerScroll::-webkit-scrollbar{
  width: 0px;
  height: 0px;
  background: transparent;
}

.Breaker{
	clear:left;display:block!important;
}

<div class="BgPickerMenu">
<ul class="BgPickerScroll">
<li class="Order Color1"></li>
<li class="Order Color2"></li>
<li class="Order Color3"></li>
<li class="Order Color4"></li>
<li class="Order Color5"></li>
<li class="Order Color6"></li>
<li class="Order Color7"></li>
<li class="Order Color8"></li>
<li class="Order Color9"></li>
<li class="Order Color10"></li>
<li class="Order Color11"></li>
<li class="Order Color12"></li>
<li class="Order Color13"></li>
<li class="Order Color14"></li>
<li class="Order Color15"></li>
<li class="Order Color16"></li>
<li class="Order Color17"></li>
<li class="Order Color18"></li>
<li class="Order Color19"></li>
<li class="Order Color20"></li>
<li class="Order Color21"></li>
<li class="Order Color22"></li>
<li class="Order Color23 Breaker"></li>
<li class="Order Color24"></li>
<li class="Order Color25"></li>
<li class="Order Color26"></li>
<li class="Order Color27"></li>
<li class="Order Color28"></li>
<li class="Order Color29"></li>
<li class="Order Color30"></li>
<li class="Order Color31"></li>
</ul>

</div>

Answer 1

添加一些填充怎么样？

.Break {
    padding-bottom: 15px;
}