Dzi Posted February 21, 2018 Share Posted February 21, 2018 Добрый день.в блоке PostContainer у меня есть социальные кнопки.Хочется чтобы они были по центру красивенько.Только вот если не указывать их все, получается вот такое: А хочется чтобы независимо от количество указанных сайтов - кнопочки были по центру.. Код CSS кнопок: .steam { margin-right: 5px; margin-left: 35px; margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .steam:hover { cursor: pointer; color: #FCFCFC } .vkontakte { margin-right: 5px; margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .vkontakte:hover { cursor: pointer; color: #FCFCFC } .skype { margin-right: 5px; margin-left: 47px; margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .skype:hover { cursor: pointer; color: #FCFCFC } .telegram { margin-right: 5px; margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .telegram:hover { cursor: pointer; color: #FCFCFC } .shikimori { margin-right: 5px; margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .shikimori:hover { cursor: pointer; color: #FCFCFC } Код в Дополнительных полях:<div class="skype"> <a href="skype:{content}?userinfo" title="{title}"> <i class="fab fa-skype"></i> </a> </div> Заранее спасибо. Link to comment Share on other sites More sharing options...
Атаман Posted February 21, 2018 Share Posted February 21, 2018 (edited) У Вас у каждой кнопки задано свое расположение и нужно править css для каждой кнопки. вк - в левом углускайп - правее от вк Edited February 21, 2018 by Атаман Link to comment Share on other sites More sharing options...
Dzi Posted February 21, 2018 Author Share Posted February 21, 2018 А можете помочь оптимизировать CSS чтобы каждая кнопка была рядом друг с другом?Буду крайне признателен за эту помощь..Я просто не особо сильно шарю в CSS. Link to comment Share on other sites More sharing options...
newbie Posted February 21, 2018 Share Posted February 21, 2018 Нужно править шаблон, либо использовать js. Плюс не нужно дублировать код. У Вас margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317;и cursor: pointer; color: #FCFCFC идентичны для всех кнопок. - Добавьте к каждой кнопке новый css класс cUserInfo_social- Замените Ваш весь css-код на .cUserInfo_social { margin-bottom: 5px; margin-top: 9px; display: inline-block; font-size: 14px; color: #bcbcbc; width: 25px; height: 25px; line-height: 25px; background: white; background-color: #18191D; transition: all 0.7s ease-in-out; transform: rotate(0deg); border-radius: 5px; float: left; border-radius: 6px; box-shadow: 0px 0px 4px 0px #121317; } .cUserInfo_social:hover { cursor: pointer; color: #FCFCFC; }- Добавьте js $('.cUserInfo_social').parent('li').css('display', 'inline-block'); 1 Link to comment Share on other sites More sharing options...
Dzi Posted February 21, 2018 Author Share Posted February 21, 2018 Куда JS код добавлять? Link to comment Share on other sites More sharing options...
newbie Posted February 21, 2018 Share Posted February 21, 2018 Хоть в шаблоны, хоть в поле настройки "Custom tracking code".Разницы нет. Link to comment Share on other sites More sharing options...
Dzi Posted February 21, 2018 Author Share Posted February 21, 2018 Спасибо, тему можно закрыть. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now