Question

我的页脚几乎没有图标。这些图标周围有边框。问题是，基于图标，边框大小正在改变。但我需要所有图标的相同大小的边框。任何人都可以帮助我。

<div class="site-footer">
    <div class="row">
       <div class="col-lg-6">
           <p class="box-1">
            You can visit us at <span class="link-webiste" style="size: 70px !important;">agoodtreeproduction.com</span></p>
       </div>
       <div class="col-lg-6">
           <h3 style="color: white;"> Around The Web</h3>
           <ul class="list-inline">
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-facebook btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-twitter btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-google-plus btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-linkedin btn-outline icon" aria-hidden="true"></i></a>
           </li>
          </ul>
       </div>
    </div>
 </div>

CSS

li {
  display: inline;
}
.site-footer{
  background-color: #6E2607;
  //display: flex;
}
.box{
  height:100px;
  min-width: 200px;
}
.One{
 //background-color: blue;

}

.two{
 //background-color: yellow;

}

.box-1{
  color: white !important;

}
.footer-elements{
  padding: 20px;   
}
.icon{
  font-size: 30px !important;
}


.btn-outline{

  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
}

 .btn-outline:hover{
  background-color: #000000;
 }

在这里演示：

https://jsfiddle.net/VijayVj7/zadx4rec/

Answer 1

将DispatchQueue.global(qos: .userInitiated).async { }添加到border-width，使其变为：

.btn-outline

将20px更改为您需要的任何内容。

Answer 2

为同一行中的元素创建相等的宽度，同时仍然允许这些元素基于其内容灵活，对于flexbox来说是一个很好的工作。如this answer所示，您可以将父元素设置为display: flex，并将每个<li>标记设置为flex-basis: 0和flex-grow: 1。这就是说每个列表项都将从没有宽度开始，并且可用的增长将在所有列表中平均分配。

但是，此设置仍然会使每个项目至少足以满足其内容。因此，您可能必须使用媒体查询来缩小较小屏幕上图标的字体大小（否则您可能会在视口外部，或者更长的文本强制使用更宽的元素），和/或考虑设置flex-wrap: wrap父母（一旦他们不能再被挤压，就会开始一个新的图标线。）

最后，我在图标中添加了box-sizing: border-box，因此他们考虑了宽度的填充。如果您不太进入项目，请考虑将该声明添加到*选择器（当前已注释掉），因为它通常被视为元素的更合理的盒子模型。

The fiddle

如何使图标的边框大小相等

2 个答案: