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

Question

我有一个右边距为 6 像素的颜色选择器。

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

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>

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

编辑：使用您提供的脚本并进行相应的编辑。如果您投反对票，您能否就原因以及如何使答案变得更好发表评论？谢谢。

Answer 2

您可以使用 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

Answer 3

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

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