複数の行で隣り合った要素に余白がない

Question

私は、6pxの右余白を持つカラーピッカーを持っています。

白い四角形（黒のチェックマーカー付き）には、次の行に折り返さないように右マージンを設定します。私は完全な幅を使いたいからです。
私は0のマージンを持つクラスを使いたくありません。色の1つを選択すると、8番目の要素が黒い四角形になる可能性があるからです。
さらに小さなデバイスでは、8番目の要素の代わりに3番目の要素に折り返すことができます。
私は自動検出方法を探しています。
私はCSSソリューションを好むだろうが、Javascript/jQueryも良いです。
要素はフロート付きリストの項目は、あなたがnth-of-typeセレクタを使用してn番目の子を選択することができます

ul.colors li, ul.colors li.chosen { 
 
    margin: 0 !important; 
 
    padding: 3px 6px 3px 0 !important; 
 
} 
 
ul.colors li .colorbox { 
 
    height: 18px; 
 
    width: 18px; 
 
    border: 1px solid #dbdbd1; 
 
} 
 

 
ul.colors, ul.colors li { 
 
    float: left; 
 
    list-style: none 
 
} 
 

 
ul.colors { width: 180px; background: #ccc; padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>

Answer 1

可能性があり、このようなことのための優れたソリューションがあります。 javascriptの必要はありません。アイコンの行数に関係なく機能します。

ul.colors li, ul.colors li.chosen { 
 
    margin: 0 !important; 
 
    padding: 3px 6px 3px 0 !important; 
 
} 
 
ul.colors li .colorbox { 
 
    height: 18px; 
 
    width: 18px; 
 
    border: 1px solid #dbdbd1; 
 
} 
 

 
ul.colors, ul.colors li { 
 
    float: left; 
 
    list-style: none 
 
} 
 

 
ul.colors { width: 182px; background: #ccc; padding: 0; margin: 0; } 
 
div.ajax-layered { width: 176px; overflow: hidden; background: #ccc; padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>

何をすることで、外容器より計6Px大きな内側容器（この場合はul）を作ることによって、右のマージンのための部屋を作るということです。必要であれば、パーセンテージを使用することもできます。その場合は、すべてをパーセンテージで設定するか、calc()を使用して必要な幅を計算します。 （calc(100%+6px)）

EDIT：提供されたスクリプトを使用してそれに応じて編集しました。あなたがdownvote場合は、なぜ、どのように答えを良くすることができるかについてのコメントを提供することができますか？ありがとうございました。

Answer 2

を残しています。

child:nth-of-type(8n) { 
    margin-right: 0; 
} 

これは8番目の子を選択して右マージンを削除します。したがって、これは次の行のために働き続けるでしょう、それはまた16番、24番などをつかむので。もっとここに

読む：各div要素のleft位置を計算https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

Answer 3

が解決

var num = +prompt('Give me length!'); 
 
var html = ''; 
 
for (var i = 0; i < num; i++) { 
 
    html += '<div class="loop"></div>'; 
 
} 
 
document.body.innerHTML = html; 
 
var elems = document.querySelectorAll('.loop'); 
 
var MARGIN = 10; 
 
[].forEach.call(elems, function(el) { 
 
    if (el.getBoundingClientRect().left == MARGIN) { 
 
    el.style.marginLeft = 0; 
 
    } 
 
})

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    width: 30px; 
 
    height: 30px; 
 
    background: green; 
 
    margin: 0 0 10px 10px; 
 
    float: left; 
 
}