Html 需要使用flex在图标周围添加边框

我正在处理边框，我想将边框添加到图标中，如图所示。到目前为止，我做到了这一点，有人能建议我指出正确的方向吗

.list{
显示器：flex；
弯曲方向：行；
宽度：182px；
背景：aliceblue；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
}
李{
宽度：20px；
填充：10px；
边框顶部：1px实心rgba（0,0,0,0.2）；
右边框：1px实心rgba（0,0,0,0.2）；
}
i、 fa{
填充物：5px；
}

通过这种方式，我认为最简单的解决方案是专门针对第5和第6个子元素。您可以使用

nth child（n）

css选择器-so

li:nth child（5）

以G+图标框为目标，然后只添加底部边框的样式。更多信息：

利用纯色和负片边距，您可以轻松实现这一点。请看下面的工作片段，希望对您有所帮助：）

.list{
显示器：flex；
弯曲方向：行；
宽度：182px；
背景：aliceblue；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
}
李{
宽度：20px；
填充：10px；
边框：1px实心#ccc；
保证金：-1px-1px 0；
}
i、 fa{
填充物：5px；
}

我要么使用

.nth子图标

伪类在每个图标上放置特定的边框，要么（在我看来）根据需要的边框在每个图标上放置一个类（

.border right

，

.border bottom

等）。这使得html在指示类应该对元素做什么方面更具描述性

---

.nth child

方法的优点是，您可以在不更改元素类的情况下重新排列元素，并且仍然可以获得相同的结果。您将不得不编写更多的css，但这是非常简单的东西，所以这不是真正的问题。

请尝试以下代码。此外，您还可以添加更多看起来不错的图标设计

.list{
显示器：flex；
弯曲方向：行；
宽度：182px；
背景：aliceblue；
}
保险商实验室{
填充：0；
利润率：0.40px0；
溢出：隐藏；
宽度：100%；
柔性包装：包装；
显示器：flex；
}
李{
宽度：33.33%；
-webkit-box-flex:0；
-ms-flex:025%；
弹性：0.33.33%；
最大宽度：33.33%；
显示：内联块；
文本对齐：居中；
边框底部：1px实心#000；
边缘底部：-1px；
填充：10px；
左边框：1px实心#000；
边缘底部：-1px；
}
李：第n个孩子（3n-5）{
左边界：无；
}
李：第n个孩子（n+2）{
边界权：无；
}
i、 fa{
填充物：5px；
}

当且仅当单行（3）中的图标数固定时

.list{
显示器：flex；
弯曲方向：行；
宽度：182px；
背景：aliceblue；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
}
李{
宽度：20px；
填充：10px；
右边框：1px实心rgba（0,0,0,0.2）；
边框底部：1px实心rgba（0,0,0,0.2）；
}
李：第n个孩子（3n+3）{
右边界：0；
}
i、 fa{
填充物：5px；
}

这里是一个使用伪元素和一个边框的想法。您只向每行的第一个和第二个元素添加

右边框

，对于从第二行开始的每个第一个元素，您在顶部添加一整行以覆盖该行

.list{
显示：内联flex；
保证金：5px；
弯曲方向：行；
宽度：182px；
背景：aliceblue；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
}
李{
宽度：20px；
填充：10px；
位置：相对；/*别忘了这一点*/
}
/*魔法从这里开始*/
李：不是（第n个孩子（3n+3））{
右边框：1px实心rgba（0,0,0,0.2）；
}
李：第n个孩子（3n+4）：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：120px；
高度：1px；
背景：rgba（0,0,0,0.2）；
}
/**/
i、 fa{
填充物：5px；
}

图标的数量是灵活的，还是永远都是7个图标？该区域是否可调整大小，或者图标可能在某个点占据2行或4行？@Peter B不，它是灵活的，图标的数量不会固定不变。是的，但是如果图标超过3行，则图标的数量会减少或增加？是的，如果您不知道行的数量，则效果不太好。但是，对于硬编码示例中的图标数量，这应该是可行的。谢谢，但是左第一个子边框呢？我不想用第n个子选择器将第一个

li

作为目标-请参见下面的答案。否则这对我来说是一个正确的解决方案。@Girisha C你能用第n个子选择器更新你的答案吗？我在Chrome和Firefox中看到7个完全装箱的图标（四面都有边框）。@Husna只需复制粘贴解决方案，然后添加

li:n个子（1）{border left style:none；}

这是什么解释