Нужна граница вокруг значка с помощью flex - PullRequest
Новая
       10

Нужна граница вокруг значка с помощью flex

0 голосов
/ 26 сентября 2018

Я работаю с границами здесь, я хочу добавить границу к значку, как показано на рисунке.пока я это сделал, может кто-нибудь предложить мне направить меня в правильном направлении 

.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>
enter image description here

Ответы [ 6 ]

0 голосов
/ 26 сентября 2018

Вот идея, использующая псевдоэлемент и одну рамку.Вы добавляете 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>
0 голосов
/ 26 сентября 2018

Если и только если число значков в одной строке (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>
0 голосов
/ 26 сентября 2018

Пожалуйста, попробуйте следующий код.Также вы можете добавить больше иконок, выглядящих хорошим дизайном 

.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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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-instagram" aria-hidden="true"></i></li>
  </ul>
</div>
0 голосов
/ 26 сентября 2018

Я бы либо использовал .nth-child псевдокласс классов для обозначения каждой из них определенных границ, либо, что еще лучше (на мой взгляд), поместил класс для каждой из них на основе нужных им границ (.border-right, .border-bottom и т. Д.).Это делает ваш html немного более наглядным с точки зрения указания того, что класс должен делать с элементом.

Преимущество метода .nth-child в том, что вы можете переставлять элементы без изменения их классов и при этом достигать того жеРезультаты.Вам придется написать немного больше CSS, но это довольно простой материал, так что это не реальная проблема.

0 голосов
/ 26 сентября 2018

Используя сплошной цвет и отрицательные поля, вы можете легко добиться этого.пожалуйста, посмотрите на приведенный ниже рабочий фрагмент, надеюсь, он поможет:) 

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

Ответ выше был моим личным мнением, чтобы иметь лучший дизайн пользовательского интерфейса, для достижения результата, как на скриншоте, вы можете сделать это с помощью 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>
0 голосов
/ 26 сентября 2018

По тому, как вы это делаете, я думаю, что самым простым решением для вас было бы нацеливание именно на 5-й и 6-й дочерние элементы.Вы можете сделать это с помощью селектора nth-child(n) css - например, li:nth-child(5), чтобы нацелиться на поле со значком G +, а затем просто добавить стиль для нижней границы.Дополнительная информация: https://www.w3schools.com/CSSref/sel_nth-child.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...