javascript - No margin on elements next to each other on multiple lines -
i have colorpicker right margin of 6px.
want white square (with black check marker) have no right margin won't wrap next line. because want use complete width .
don't want use class margin on 0 because when choose 1 of colors 8th element black square.
, on smaller devices wrap can @ 3th element instead of 8th element.
i'm looking automatic detection method.
prefer css solution javascript/jquery good.
elements list-items float left
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>
there's great solution things this. no need javascript , works no matter how many rows of icons get.
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>what make room margin on right making inner container (in case ul) 6px larger outer container. if required, make use of percentages. in case can either set in percentages, or use calc() calculate required width. ( calc(100%+6px) )
edit: used provided script , edited accordingly. if downvote, provide comment why, , how answer can made better? thank you.
Comments
Post a Comment