文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >需要使用flex图标的边框

问需要使用flex图标的边框
EN

Stack Overflow用户
提问于 2018-09-26 12:42:46
回答 6查看 184关注 0票数 3

我在这里使用边框，我想将边框添加到图标中，如图像所示。到目前为止，我做了这件事，谁能建议我指出正确的方向？

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

css
flexbox
html
EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2018-09-26 13:21:00

这里有一个使用伪元素和一个边框的想法。您只将border-right添加到每一行的第一个和第二个元素中，对于从第二行开始的每个第一个元素，您将在顶部添加一整行，以覆盖该行。

​

代码语言：javascript
复制
.list {
  display: inline-flex;
  margin:5px;
  flex-direction: row;
  width: 182px;
  background: aliceblue;
}

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

li {
  width: 20px;
  padding: 10px;
  position:relative; /*Don't forget this*/
}
/*The magic starts here */
li:not(:nth-child(3n + 3)) {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
li:nth-child(3n + 4):before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:120px;
  height:1px;
  background:rgba(0, 0, 0, 0.2);
}
/**/
i.fa {
  padding: 5px;
}
代码语言：javascript
复制
<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>
  </ul>
</div>
<div class="list">
  <ul>
    <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
    <li><i class="fa fa-github" aria-hidden="true"></i></li>
    <li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
  </ul>
</div>
<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>
  </ul>
</div>
<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>
    <li><i class="fa fa-github" aria-hidden="true"></i></li>
  </ul>
</div>
<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>
    <li><i class="fa fa-github" aria-hidden="true"></i></li>
    <li><i class="fa fa-github" aria-hidden="true"></i></li>
  </ul>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-09-26 12:51:15

利用坚实的颜色和负面的边缘，你可以很容易做到这一点。请看下面的工作片段，希望它有帮助:)

​

代码语言：javascript
复制
.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: 1px solid #ccc;
  margin: -1px -1px 0 0;
}

i.fa {
  padding: 5px;
}
代码语言：javascript
复制
<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>

​

上面的答案是我个人的观点，希望有一个更好的ui设计，为了实现屏幕截图的结果，您可以使用table标记和几行css，如下代码片段所示。它有自己的行捕获，您需要控制行:)

​

代码语言：javascript
复制
table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border-width: 1px;
  border-style: inset;
  border-color:#ccc;
  padding: 10px;
}
代码语言：javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<table>
  <tr>
    <td><i class="fa fa-facebook" aria-hidden="true"></i></td>
    <td><i class="fa fa-twitter" aria-hidden="true"></i></td>
    <td><i class="fa fa-pinterest-p" aria-hidden="true"></i></td>
  </tr>
  <tr>
    <td><i class="fa fa-dribbble" aria-hidden="true"></i></td>
    <td><i class="fa fa-google-plus" aria-hidden="true"></i></td>
    <td><i class="fa fa-whatsapp" aria-hidden="true"></i></td>
  </tr>
  <tr>
    <td><i class="fa fa-github" aria-hidden="true"></i></td>
  </tr>
</table>

​

票数 1
EN

Stack Overflow用户

发布于 2018-09-26 12:54:08

我要么使用图标的.nth-child伪类在每个图标上放置特定的边框，要么更好地(我认为)根据需要的边框(.border-right、.border-bottom等)在每个图标上设置一个类。这使得html在指示类应该对元素做什么方面更具有描述性。

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52518040

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档