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

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

.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>
Нужна граница вокруг значка с помощью гибкости

Можно ли менять количество значков или всегда 7 значков? Можно ли изменять размер области или значки могут занимать место, например 2 или 4 ряда в какой-то момент?

— Peter B 26.09.2018 14:46

@ Peter B нет, это гибко, количество иконок не будет изменяться статично.

— Husna 26.09.2018 14:48
html css flexbox
26.09.2018 14:42
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
2
128
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

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

ага а если иконок меньше или больше если в них больше 3-х рядов?

— Husna 26.09.2018 14:51

Да, не очень хорошо работает, если вы не знаете количество строк. Но для жесткого кодирования количества значков, как в примере, это должно сработать.

— matmik 26.09.2018 14:54
26.09.2018 14:48

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

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

спасибо, но как насчет левой границы первого ребенка, я не хочу

— Husna 26.09.2018 14:53

Затем выберите первый li с помощью селектора nth-child - см. Мой ответ ниже. В противном случае для меня это правильное решение.

— matmik 26.09.2018 14:54

@Girisha C, пожалуйста, обновите свой ответ, используя селектор nth-child.

— Husna 26.09.2018 14:59

Я вижу 7 полностью заключенных в рамку значков (границы со всех сторон) как в Chrome, так и в Firefox.

— Peter B 26.09.2018 15:02

@Husna просто скопируйте и вставьте решение и добавьте li:nth-child(1) { border-left-style: none; }

— matmik 26.09.2018 15:10

@Husna, @Peter B - пожалуйста, взгляните на второй ответ выше, используя table, у него есть собственный улов, связанный с наличием строк, которые необходимо контролировать :(

— Girisha C 26.09.2018 15:21
26.09.2018 14:51

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

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

26.09.2018 14:54

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

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

какое объяснение это Пожалуйста, попробуйте следующий код, я работаю над вашей проблемой, пока вы не опубликуете проблему?

— Temani Afif 26.09.2018 15:23
26.09.2018 15:11

Если и только если фиксировано количество значков в одной строке (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>
26.09.2018 15:11
Ответ принят как подходящий

Вот идея использования псевдоэлемента и одной границы. Вы добавляете 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>
26.09.2018 15:21

Другие вопросы по теме

$ document-> addStyleSheet устарел
Скрытый контент в Chrome с горизонтально центрированным макетом Flexbox
Добавить эффект SlideDown в CSS модального закрытия
Мне нужно выбрать маршруты из div-контейнера маршрута и отобразить его в параметрах выбора
Ввод в поле ввода в iframe заставляет iframe прокручиваться вниз
Сохраняйте фиксированное положение логотипа на адаптивной навигационной панели
Надпись Flexslider будет исправлена
Автоматически устанавливать направление и выравнивать текст на основе языков RTL или LTR
Лучший способ выровнять изображения с текстом в Wordpress?
Bootstrap 4 - Ссылка на цвет по корневому имени в css

Похожие вопросы

Отправить значение кеша в браузеры сохранить поле пароля
Как передать большую строку из основного представления ASP.NET в javascript
Кто-нибудь знает, почему страница перезагружается?
Загружать данные из БД в раскрывающийся список без POST
Устранение неполадок с результатами панели поиска в php
Скрытый контент в Chrome с горизонтально центрированным макетом Flexbox
Красиво добавляйте элементы HTML в DOM с помощью JQuery
Мне нужно выбрать маршруты из div-контейнера маршрута и отобразить его в параметрах выбора
Переходить между ионными страницами
Ввод в поле ввода в iframe заставляет iframe прокручиваться вниз