Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
0 / 0 / 0
Регистрация: 05.06.2016
Сообщений: 57
1

Адаптация иконок соц. сетей под div с нефиксированной шириной

08.10.2016, 13:26. Показов 2035. Ответов 6
Метки нет (Все метки)

Привет всем. Требуется задать одинаковые отступы друг от друга у этих иконок соц. сетей. Как это можно сделать?
Миниатюры
Адаптация иконок соц. сетей под div с нефиксированной шириной  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.10.2016, 13:26
Ответы с готовыми решениями:

Размещение иконок соц сетей в строку
Проблема в том что хочу разместить иконки фейсбука в строку,но не получается.Прошу помочь. ...

Как сделать кнопки соц сетей под статьей ?
Как сделать кнопки соц сетей под статьей ? Что бы люди заходили на сайт и если им нравится статья...

К реке шириной a м построен под прямым углом канал шириной b м. Какой максимальной длины суда могут входить в этот канал
...канал* Как это можно решить?

Выравнивание иконок социальных сетей
Здравствуйте, форумчане. суть проблемы в отступах после фейсбука. почему-то футер слушается той...

6
Эксперт HTML/CSS
2957 / 2546 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
08.10.2016, 13:35 2
Welaurs, во-первых где код списка? Во-вторых, почему не использовать margin или padding для отступов?
0
0 / 0 / 0
Регистрация: 05.06.2016
Сообщений: 57
08.10.2016, 13:51  [ТС] 3
Fedor92, прошу прощения. Margin и padding пробовал использовать, но они мне не подходят, так как ширина меню 33%. А мне надо чтобы между этими элементами были одинаковые отступы.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<body>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
            <div class="side-menu-footer">
                <div class="side-menu-soc">
                    <i class="fa fa-facebook-official side-menu-soc-icon" aria-hidden="true"></i>
                    <i class="fa fa-vk side-menu-soc-icon" aria-hidden="true"></i>
                    <i class="fa fa-google-plus side-menu-soc-icon" aria-hidden="true"></i>
                    <i class="fa fa-twitter-square side-menu-soc-icon" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </body>
CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.col-lg-2 {
    width: 16.66666667%;
}
 
.side-menu-footer {
    position: absolute;
    bottom: 15px;
}
 
.side-menu-soc {
    margin-top: 100px;
    color: #939598;
    float:left;
    margin-left: 25px;
    font-size: 25px;
    transition: all 0.5s;
    word-spacing: 150%;
}
 
.side-menu-soc-icon {
    display: inline-block;
    transition: all 1.0s;
    vertical-align: bottom;
}
0
Эксперт HTML/CSS
2957 / 2546 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
08.10.2016, 14:00 4
Цитата Сообщение от Welaurs Посмотреть сообщение
А мне надо чтобы между этими элементами были одинаковые отступы.
Они итак одинаковые... Может символы разные по ширине и им имеет смысл задать ширину и высоту?
0
0 / 0 / 0
Регистрация: 05.06.2016
Сообщений: 57
08.10.2016, 14:02  [ТС] 5
Fedor92, я имею ввиду элементы должны равномерно распределяться по ширине всего блока.
0
Эксперт HTML/CSS
2957 / 2546 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
08.10.2016, 14:55 6
Лучший ответ Сообщение было отмечено Welaurs как решение

Решение

Welaurs, а почему не используете средства бустрапа? Пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
        <!-- Optional theme -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
 
        <!-- Latest compiled and minified JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <style>
        html, body{width: 100%; height: 100%; margin: 0}
        .side-menu-footer {
            position: absolute;
        }
         
        .side-menu-soc {
            margin-top: 100px;
            color: #939598;
            float:left;
            font-size: 25px;
            transition: all 0.5s;
            border:1px solid blue
        }
         
        .side-menu-soc-icon {
            display: inline-block;
            transition: all 1.0s;
            vertical-align: bottom;
        }
        i{
            height: 40px;
            border:1px solid red
        }
        
        </style>
    </head>
    <body>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
            <div class="side-menu-footer col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="side-menu-soc col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <i class="col-lg-3 col-md-3 col-sm-3 col-xs-3 fa fa-facebook-official side-menu-soc-icon" aria-hidden="true">1</i>
                    <i class="col-lg-3 col-md-3 col-sm-3 col-xs-3 fa fa-vk side-menu-soc-icon" aria-hidden="true">2</i>
                    <i class="col-lg-3 col-md-3 col-sm-3 col-xs-3 fa fa-google-plus side-menu-soc-icon" aria-hidden="true">3</i>
                    <i class="col-lg-3 col-md-3 col-sm-3 col-xs-3 fa fa-twitter-square side-menu-soc-icon" aria-hidden="true">4</i>
                </div>
            </div>
        </div>
    </body>
</html>
1
0 / 0 / 0
Регистрация: 05.06.2016
Сообщений: 57
08.10.2016, 16:51  [ТС] 7
Fedor92, не зря говорится "всё гениальное просто"... Честно говоря даже не подумал об этом.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.10.2016, 16:51

CSS-код иконок социльных сетей
Есть такие стили для иконок соц. сетей. Например у инстаграма .class:before {content: &quot;\f16d&quot;;}...

Блокировка соц сетей
Доброй ночи. Словил троян блокирующий соц сети, точно такой же случай описан в этой теме...

шара соц сетей
как создать шару со своими картинками соц сетей?

Кнопки соц сетей
Всем добрый день. Подскажите как добавить эти кнопки на свой сайт? и что нужно сделать что бы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.