задать марджины между кнопками в классе |
Здравствуйте Гость [ Вход | Регистрация ] | Форум в сети 6761-й день
Шановні користувачі! Запрошуємо вас до офіційного телеграм-канала 0day Community. Тут ви зможете поспілкуватися одне з одним та дізнатися про останні новини щодо роботи ресурса, поставити запитання до адміністрації, тощо. Перейти до телеграм-канала можна відсканувавши QR-код або натиснувши на посилання: @zeroday_ua |
задать марджины между кнопками в классе |
mstdmstd |
Jun 6 2016, 6:43
Пост
#1
|
Репутация: 2 Активист Группа: Пользователи Сообщений: 340 С нами с: 13-January 16 |
Всем привет,
Имея группу кнопок внути блока с классом editor-btn-group : <div class=" btn-group pull-right editor-btn-group"> <input type="button" value="Next" class="btn btn-success btn-login-submit" onclick="java script:onSubmit();"> <button type="button" class="btn btn-danger btn-cancel-action" style="margin-left: 20px;" onclick="java script:document.location='' ">Cancel</button> </div> Можно ли задать марджины между кнопками в классе editor-btn-group, и если да то как? Спасибо ! |
Анттошка |
Jun 6 2016, 9:45
Пост
#2
|
Репутация: 103 Старожил Группа: Пользователи Сообщений: 2 276 С нами с: 29-June 09 |
А как ты хочешь внутренним блокам задать поля через родитель? Первой кнопке задай поле и вперед.
|
Durex |
Jun 6 2016, 10:09
Пост
#3
|
Репутация: 60 Активист Группа: Пользователи Сообщений: 291 С нами с: 14-June 06 |
editor-btn-group:first-child {margin:5px;}
Почему только один input, другой button если в целом используете bootstrap? Сообщение отредактировал Durex - Jun 6 2016, 10:10 |
mstdmstd |
Jun 6 2016, 12:10
Пост
#4
|
Репутация: 2 Активист Группа: Пользователи Сообщений: 340 С нами с: 13-January 16 |
editor-btn-group:first-child {margin:5px;} Почему только один input, другой button если в целом используете bootstrap? переделал с кнопками и first-child не подключается https://jsfiddle.net/e214b0ab/21/ |
Durex |
Jun 6 2016, 13:20
Пост
#5
|
Репутация: 60 Активист Группа: Пользователи Сообщений: 291 С нами с: 14-June 06 |
Пардон, промахнулся
.editor-btn-group button:first-child |
mstdmstd |
Jun 6 2016, 13:49
Пост
#6
|
Репутация: 2 Активист Группа: Пользователи Сообщений: 340 С нами с: 13-January 16 |
Пардон, промахнулся .editor-btn-group button:first-child Да спасибо так выделяется первая кнопка Я нашел как выделить последнюю кнопку .editor-btn-group button:last-child { Причем совместить с первой кнопкой в одном условии не удалось... А как выделить все кнопки? И дайте, пожалуйста, ссылку на хорошее описание этих псевдоклассов... |
Анттошка |
Jun 6 2016, 14:17
Пост
#7
|
Репутация: 103 Старожил Группа: Пользователи Сообщений: 2 276 С нами с: 29-June 09 |
Да спасибо так выделяется первая кнопка Я нашел как выделить последнюю кнопку .editor-btn-group button:last-child { Причем совместить с первой кнопкой в одном условии не удалось... А как выделить все кнопки? И дайте, пожалуйста, ссылку на хорошее описание этих псевдоклассов... измени тег input на button и вешай условие на .editor-btn-group button{} http://htmlbook.ru/samcss/psevdoklassy Не путай с псевдоэлементами. |
Durex |
Jun 6 2016, 18:02
Пост
#8
|
Репутация: 60 Активист Группа: Пользователи Сообщений: 291 С нами с: 14-June 06 |
Да спасибо так выделяется первая кнопка Я нашел как выделить последнюю кнопку .editor-btn-group button:last-child { Причем совместить с первой кнопкой в одном условии не удалось... А как выделить все кнопки? И дайте, пожалуйста, ссылку на хорошее описание этих псевдоклассов... Для первого и последнего .editor-btn-group button:first-child, .editor-btn-group button:last-child {} Совсем все button {}. Только в этом слое .editor-btn-group button {} Сообщение отредактировал Durex - Jun 6 2016, 18:03 |
SyntaxError |
Jun 7 2016, 9:15
Пост
#9
|
Репутация: 440 Ветеран Группа: Пользователи Сообщений: 7 467 С нами с: 7-December 12 |
На все случаи жизни: Способ №1: .editor-btn-group button, .editor-btn-group input[type="submit"], .editor-btn-group input[type="button"], .editor-btn-group input[type="reset"] { margin-left:20px; } .editor-btn-group button:first-child, .editor-btn-group input[type="submit"]:first-child, .editor-btn-group input[type="button"]:first-child, .editor-btn-group input[type="reset"]:first-child { margin-left: 0; } Способ №2 (короче, но используется селектор *, что не ок для производительности): .editor-btn-group * { margin-left:20px; } .editor-btn-group *:first-child { margin-left: 0; } Но как уже писали выше - лучше input на button заменить. |
mstdmstd |
Jun 7 2016, 9:29
Пост
#10
|
Репутация: 2 Активист Группа: Пользователи Сообщений: 340 С нами с: 13-January 16 |
Спасибо!
|
Упрощённая версия | Сейчас: 17th September 2024 - 21:32 |
Сайт не розміщує електронні версії творів, а займається лише колекціонуванням та каталогізацією посилань, що публікуються нашими користувачами. Якщо Ви є правовласником якоїсь частини опублікованого матеріалу та не бажаєте, щоб посилання на нього знаходилось в нашому каталозі, зв’яжіться з нами і ми видалимо його. Файли для обміну надані користувачами сайту і адміністрація не несе відповідальності за їх вміст. |