需要使用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

使用纯色和负页边距可以轻松实现这一目标。请查看下面的工作代码段，希望对您有所帮助：）

.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;
}

<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来做到这一点，如下面的代码片段所示。它拥有自己的行，这是您需要控制的：）

table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border-width: 1px;
  border-style: inset;
  border-color:#ccc;
  padding: 10px;
}

<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>

Answer 2

我可以使用图标的.nth-child伪类在每个边框上放置特定的边框，或者更好（我认为）根据需要的边框在每个边框上放置一个类（{{1 }}，.border-right等）。这使您的html在指示类应对元素执行的操作方面更具描述性。

.border-bottom方法的优点是，您可以在不更改元素类的情况下重新排列元素，并且仍然可以获得相同的结果。您将不得不再写一些CSS，但这是非常简单的内容，因此并不是真正的问题。

Answer 3

请尝试以下代码。您还可以添加更多外观精美的图标

public static void main(String[] args) {            
        WebDriver driver;
        System.setProperty("webdriver.chrome.driver", "E:\\Softwares\\Chromedriver.exe");
        driver = new ChromeDriver();
        driver.get("https://html.com/input-type-file/");
        driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);    
        WebElement closeButon = driver.findElement(By.xpath("//a[@class='om-close miami-element-close miami-close']"));     

        if(closeButon.isDisplayed())
        {
            System.out.println("close Buton is there.. ");
            closeButon.click();
            System.out.println("close Buton closed ");
        }
        driver.findElement(By.xpath("//input[@name='fileupload']")).sendKeys("E:\\Users\\laxman_p\\Desktop\\PromoFeature.txt");
        //Submit button

.list {
  display: flex;
  flex-direction: row;
  width: 182px;
  background: aliceblue;
}
ul {
  padding: 0;
  margin: 0 0 40px 0;
  overflow: hidden;
  width: 100%;
  flex-wrap: wrap;
  display: flex;
}
li {
  width: 33.33%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid #000;
  margin-bottom: -1px;
  padding: 10px;
  border-left: 1px solid #000;
  margin-bottom: -1px;
}
li:nth-child(3n-5) {
  border-left: none;
}
li:nth-child(n+2) {
  border-right: none;
}
i.fa {
  padding: 5px;
}

Answer 4

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

.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-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

li:nth-child(3n+3) {
  border-right: 0;
}

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>
    <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 5

通过这种方式，我认为最简单的解决方案是针对第5个和第6个子元素。您可以使用nth-child(n) CSS选择器进行操作-例如，li:nth-child(5)以G +图标框为目标，然后仅添加底部边框的样式。详细信息：https://www.w3schools.com/CSSref/sel_nth-child.asp

Answer 6

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

.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;
}

<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>