css 去掉列表中每一行最后一个元素的外边距或属性

旧城等待， 2023-02-25 07:09 12阅读 0赞

css 去掉列表中每一行最后一个元素的外边距或属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
设定外框的宽度为`180px`  
内部的每个tag宽度`34px`右边距为`12px`并列排列后，一行够排列3个  
我们计算一下剩余的宽度：  
`180-(34+12)*3 = 42`  
最终得出剩余宽度为`42`很显然，其实如果最右边的tag的右边距为空，他就可以变成4个一排了  
看一下我们现在的代码：

.content{ 
        margin-top: 50px;
        margin-left: 50px;
        width: 180px;
        border:1px solid red;
        display: flex;
        flex-wrap: wrap;
    }
    .tag{ 
        width: 34px;
        height: 40px;
        margin-bottom: 10px;
        margin-right: 12px;
        background-color:yellow;
    }

我这里提供一个解决的思路，就是在中间加一层用来撑开宽度的div，先看看效果实现  
![在这里插入图片描述][20200717194819951.png]

可以看到多了一个边框为蓝色的块，并且，排列变成了4个一排，来看一下代码

.content{ 
        margin-top: 50px;
        margin-left: 50px;
        width: 180px;
        border:1px solid red;
    }
    .tag{ 
        width: 34px;
        height: 40px;
        margin-bottom: 10px;
        margin-right: 12px;
        background-color:yellow;
    }
    .blocks{ 
        width: calc(100% + 12px);
        display: flex;
        flex-wrap: wrap;
        border:1px solid blue;
    }

多加了一个`blocks`的块，并且弹性布局也移动了进去(为了正常展示排列换行)  
最主要的是使用`width: calc(100% + 12px)`来设置宽度，多层开了`12px`（就是每个tag的右边距）

这样就完美达到了效果  
如果我们将右边距改成对应的左边距，就可以实现，每次换行之后，第一个tag永远是贴紧最左边的  
![在这里插入图片描述][20200717195452933.png]

... .tag{ 
        width: 34px;
        height: 40px;
        margin-bottom: 10px;
        margin-left: 12px;
        background-color:yellow;
    }
    .blocks{ 
        width: calc(100% + 12px);
        margin-left: -12px;
        display: flex;
        flex-wrap: wrap;
        border:1px solid blue;
    }

第一次发现这种方法，感觉特别神奇，哈哈哈，这可能就是一种技巧了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: /images/20230209/b13d281cd4894b8793d616caa53808b7.png
[20200717194819951.png]: /images/20230209/709f4d1ee1f646cb8d88f72a4ec6603e.png
[20200717195452933.png]: /images/20230209/47dc7e41c1b2461e8b01070dabddeeee.png