Kein Rand auf Elementen nebeneinander in mehreren Zeilen

Question

Ich habe einen Colorpicker mit einem rechten Rand von 6px.

Ich möchte, dass das weiße Quadrat (mit dem schwarzen Häkchenmarker) keinen rechten Rand hat, so dass es nicht in die nächste Zeile springt. Weil ich die komplette Breite benutzen möchte.
Ich möchte nicht eine Klasse mit Rand auf 0 verwenden, denn wenn ich eine der Farben wähle, könnte das achte Element das schwarze Quadrat sein.
Und auch auf kleineren Geräten kann die Wrap am 3. Element statt am 8. Element sein.
Also ich suche nach einer automatischen Erkennungsmethode.
Ich würde eine CSS-Lösung bevorzugen, aber Javascript/jQuery ist auch gut.
Die Elemente sind list-Elemente mit einem Schwimmer

links

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

Es gibt eine große Lösung für Dinge wie diese. Keine Notwendigkeit für Javascript und es funktioniert, egal wie viele Reihen von Symbolen Sie erhalten.

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>

Was Sie tun, ist, dass Sie Platz für den Rand auf der rechten Seite, indem sie den inneren Behälter (in diesem Fall die ul) 6px größer als der äußere Behälter machen. Dies könnte bei Bedarf auch Prozentsätze verwenden. In diesem Fall können Sie entweder alles in Prozent eingeben oder calc() verwenden, um die erforderliche Breite zu berechnen. (calc(100%+6px))

BEARBEITEN: Benutzte Ihre bereitgestellten Skript und bearbeitet es entsprechend. Könntest du, wenn du einen Downvote machst, einen Kommentar dazu abgeben, warum und wie die Antwort besser gemacht werden kann? Vielen Dank.

Answer 2

Sie können wählen Sie ein ein n-tes Kind den nth-of-type Selektor.

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

Dies wird jedes 8. Kind auswählen und den rechten Rand entfernen. Das wird auch für die nächsten Zeilen funktionieren, da es auch den 16., 24. und so weiter ergreift.

Lesen Sie hier mehr: https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

Answer 3

Berechnung left Position jedes div Element

eine Lösung sein könnte

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; 
 
}