css-如何对每行中最后一个元素删除边距？

---

前言

如何从最后一列的每个元素中删除边距？
在元素宽度不确定的情况下，或者如果屏幕很小或用户调整浏览器大小，则每行排列的个数就不确定
因此，在任何情况下，最后一列中出现的任何元素(可以是一个或多个然后是一个)。我想删除margin-right。

除非您确切知道每行有多少个元素(通过选择器的nth-child()系列)，否则无法使用纯CSS在每行的特定元素上删除或添加样式。

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
   <li>item 9</li>
</ul>

---

一、负边距

通过在父元素上添加负边距来伪装它们。这会给人一种幻想，即您的子元素适合放在父元素内，而各个元素之间仍然有间距

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}
li:last-child{
    margin-right: 5px;
}

注意:这可能需要在祖先元素上添加overflow-x: hidden来防止水平滚动，具体取决于容器元素与视口边缘的接近程度。

一、nth-child()系列)

如果可以合理地预测每行有多少个项目，则可以使用媒体查询通过nth-child()定位该行中的最后一个项目。这比使用负边距要冗长得多，但它可以让您进行其他样式调整

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}