Как я могу добавить пробел между этими логотипами в списке

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

Я пробовал light-height и ничего не происходит:

    <div class = "container2">
        <ul class = "contact1">
            <li class = "contact2"><img src = "facebook.png" alt = "facebook" class = "facebook"> </li>
            <li class = "contact3"><img src = "twitter.png" alt = "twitter" class = "twitter"> </li>
            <li class = "contact4"><img src = "instagram.png" alt = "instagram" class = "instagram"> </li>
            <li class = "contact5"><img src = "twitch.png" alt = "twitch" class = "twitch"> </li>
        </ul>
    </div>

.contact1 {
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%.-50%) 
}


 .contact1, .contact2, .contact3, .contact4, .contact5 {
    list-style: none;
    border: none;
    position: relative;
    line-height: 50px;
 }

html css

28.05.2019 05:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

351

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я бы рекомендовал просто установить margin-left на каждый .contact, который не является первым.

Этого можно добиться гораздо проще, если присвоить каждому элементу класс такой же из .contact, а затем использовать псевдоселектор :not в сочетании с псевдоселектором :first-of-type. Это можно увидеть в следующем:

.contact-container {
  position: absolute;
  display: flex;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%.-50%)
}

.contact-container,
.contact {
  list-style: none;
  border: none;
  position: relative;
  line-height: 50px;
}

.contact:not(:first-of-type) {
  margin-left: 20px;
}

<ul class = "contact-container">
  <li class = "contact"><img src = "https://placehold.it/100" alt = "facebook" class = "facebook"> </li>
  <li class = "contact"><img src = "https://placehold.it/100" alt = "twitter" class = "twitter"> </li>
  <li class = "contact"><img src = "https://placehold.it/100" alt = "instagram" class = "instagram"> </li>
  <li class = "contact"><img src = "https://placehold.it/100" alt = "twitch" class = "twitch"> </li>
</ul>

28.05.2019 05:48

Если вы просто хотите добавить пространство, вы можете сделать это с помощью flex box justify-content:space-around
и я отредактировал ваш transform: translate(-50%, -50%); в .contact1 см. этот фрагмент ниже

.contact1 {
    position: absolute;
    display: flex;
    justify-content:space-around;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}


 .contact1, .contact2, .contact3, .contact4, .contact5 {
    list-style: none;
    border: none;
    position: relative;
    line-height: 50px;
 }

<div class = "container2">
        <ul class = "contact1">
            <li class = "contact2"><img src = "facebook.png" alt = "facebook" class = "facebook"> </li>
            <li class = "contact3"><img src = "twitter.png" alt = "twitter" class = "twitter"> </li>
            <li class = "contact4"><img src = "instagram.png" alt = "instagram" class = "instagram"> </li>
            <li class = "contact5"><img src = "twitch.png" alt = "twitch" class = "twitch"> </li>
        </ul>
    </div>

28.05.2019 05:52

Ответ принят как подходящий

Я рекомендую использовать правильный способ классов в html/css

Вот HTML

<div class = "container2">
    <ul>
        <li><img src = "facebook.png" alt = "facebook" class = "facebook"> </li>
        <li><img src = "twitter.png" alt = "twitter" class = "twitter"> </li>
        <li><img src = "instagram.png" alt = "instagram" class = "instagram"> </li>
        <li><img src = "twitch.png" alt = "twitch" class = "twitch"> </li>
    </ul>
</div>

Вот CSS:

.container2 ul{
    position: absolute;
    display: flex;
    justify-content:space-around;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

.container2 ul li{
    list-style: none;
    border: none;
    position: relative;
    line-height: 50px;
 }

28.05.2019 07:47

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

Оставшиеся символы текстовой области не работают должным образом

Как выровнять текст метки с переключателем

Переполнение дочернего элемента за пределы родительского элемента

Страница макета входа ASP.NET MVC не отображает CSS

Пробел в изображении - только на мобильных устройствах - (как сделать адаптивный сайт)

Почему добавление поля к моему div вытесняет его содержимое (столбцы) со страницы?

Как выровнять текст с изображением

Сохранение ширины элемента статической после удаления другого элемента, но при этом остающейся отзывчивой

Изменить стиль данных таблицы в скрытой строке таблицы при отображении строки таблицы

Z-индекс перевернут в iOS и Safari macOS

Как я могу добавить пробел между этими логотипами в списке

Ответы 3

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

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