html - 使用 flex 需要在图标周围加边框

Question

我在这里使用边框 我想给图标添加边框，如图所示。到目前为止，我这样做了，任何人都可以建议我指出正确的方向

.list {
  display: flex;
  flex-direction: row;
  width: 182px;
  background: aliceblue;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

li {
  width: 20px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

i.fa {
  padding: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="list">
  <ul>
    <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
    <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
    <li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
    <li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
    <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
    <li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
    <li><i class="fa fa-github" aria-hidden="true"></i></li>
  </ul>
</div>

Answer 1

我要么使用图标的 .nth-child 伪类为每个图标添加特定的边框，或者更好的是(在我看来)根据边框为每个图标添加一个类它需要(.border-right、.border-bottom 等)。这使您的 html 在指示类应该对元素执行的操作方面更具描述性。

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