多行上彼此相邻的元素没有边距

时间：2016-06-29 09:03:14

标签： javascript jquery html css margin

我有一个右边距为6px的颜色选择器 Colorpicker
我希望白色方块（带有黑色检查标记）没有右边距，这样它就不会换到下一行。因为我想使用完整的宽度 我不想使用边距为0的类，因为当我选择其中一种颜色时，第8个元素可能是黑色正方形。
而且在较小的设备上，包裹可以是第3个元素而不是第8个元素 所以我正在寻找一种自动检测方法 我更喜欢CSS解决方案，但Javascript / jQuery也很好 元素是带有浮动的列表项

＆＃13;
＆＃13; 
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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您可以使用nth-of-type选择器选择第n个孩子。

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

这将选择每个第8个孩子并删除正确的边距。所以这将继续适用于下一行，因为它也抓住了16日，24日等等。

在此处阅读更多内容：https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

答案 1 :(得分：0)

对于这样的事情来说，这是一个很好的解决方案。无需javascript，无论您获得多少行图标，它都能正常工作。

＆＃13;
＆＃13; 
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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

你所做的是通过使内部容器（在这种情况下为ul）比外部容器大6px，为右边的边距腾出空间。如果需要，这也可以使用百分比。在这种情况下，您可以将所有内容设置为百分比，或使用calc()计算所需的宽度。 （calc(100%+6px)）

编辑：使用您提供的脚本并相应地进行编辑。如果你是downvote，你能否就其原因提出评论，以及如何更好地解决问题？谢谢。

答案 2 :(得分：-1)

计算每个div元素的left位置可能是一个解决方案

＆＃13;
＆＃13; 
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;
  }
})
＆＃13; 
* {
  padding: 0;
  margin: 0;
}
div {
  width: 30px;
  height: 30px;
  background: green;
  margin: 0 0 10px 10px;
  float: left;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题