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

@Welaurs · Регистрация: 05.06.2016

Привет всем. Требуется задать одинаковые отступы друг от друга у этих иконок соц. сетей. Как это можно сделать?

@Fedor92 · 08.10.2016, 13:35

Welaurs, во-первых где код списка? Во-вторых, почему не использовать margin или padding для отступов?

@Welaurs · 08.10.2016, 13:51 **[ТС]**

Fedor92, прошу прощения. Margin и padding пробовал использовать, но они мне не подходят, так как ширина меню 33%. А мне надо чтобы между этими элементами были одинаковые отступы.

HTML5

<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

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

@Fedor92 · 08.10.2016, 14:00

Сообщение от Welaurs

А мне надо чтобы между этими элементами были одинаковые отступы.

Они итак одинаковые...

Может символы разные по ширине и им имеет смысл задать ширину и высоту?

@Welaurs · 08.10.2016, 14:02 **[ТС]**

Fedor92, я имею ввиду элементы должны равномерно распределяться по ширине всего блока.

@Fedor92 · 08.10.2016, 14:55

Welaurs, а почему не используете средства бустрапа? Пример:

HTML5

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

@Welaurs · 08.10.2016, 16:51 **[ТС]**

Fedor92, не зря говорится "всё гениальное просто"... Честно говоря даже не подумал об этом.

@Welaurs 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 57
		1
	Адаптация иконок соц. сетей под div с нефиксированной шириной 08.10.2016, 13:26. Показов 2035. Ответов 6 Метки нет (Все метки) Привет всем. Требуется задать одинаковые отступы друг от друга у этих иконок соц. сетей. Как это можно сделать? Миниатюры __________________ Помощь в написании контрольных, курсовых и дипломных работ здесь 0

@Fedor92 2957 / 2546 / 1066 Регистрация: 15.12.2012 Сообщений: 9,607 Записей в блоге: 10
	08.10.2016, 13:35	2
	Welaurs, во-первых где код списка? Во-вторых, почему не использовать margin или padding для отступов? 0

@Fedor92 2957 / 2546 / 1066 Регистрация: 15.12.2012 Сообщений: 9,607 Записей в блоге: 10
	08.10.2016, 14:00	4
	Сообщение от Welaurs А мне надо чтобы между этими элементами были одинаковые отступы. Они итак одинаковые... Может символы разные по ширине и им имеет смысл задать ширину и высоту? 0

@Welaurs 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 57
	08.10.2016, 14:02 [ТС]	5
	Fedor92, я имею ввиду элементы должны равномерно распределяться по ширине всего блока. 0

@Welaurs 0 / 0 / 0 Регистрация: 05.06.2016 Сообщений: 57
	08.10.2016, 16:51 [ТС]	7
	Fedor92, не зря говорится "всё гениальное просто"... Честно говоря даже не подумал об этом. 0

Опции темы

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

Решение