Отступ между кнопками css

Содержание

Расстояние между кнопками Bootstrap
5 ответов
Ещё вопросы
Как убрать отступы между кнопками в CSS?
Расстояние и разделение между кнопками
Удалите пробелы между кнопками в HTML, CSS
Расстояние между кнопками

Расстояние между кнопками Bootstrap

расстояние между? Вы хотите, чтобы они были выровнены по горизонтали? Вы пробовали какой-нибудь пользовательский CSS?

5 ответов

Использовать поле свойства css

button < margin: 5px 5px 5px 5px >//change the value to see the effect and choose for yourself which value to keep

margin: margin-top margin-right margin-bottom margin-left;

сначала мы должны изучить встроенные возможности начальной загрузки, если мы используем среду начальной загрузки.

Вы можете использовать интервал Bootstrap, документы здесь → https://getbootstrap.com/docs/4.0/utilities/spacing/

В этом примере класс mr-2 используется для добавления правых полей к кнопкам.

«btn-toolbar» делает трюк одним махом. Не требуется ручная css’ing

Я добавил один пустой диапазон, чтобы центрировать jumbo на экране, а также добавил «капсульный» диапазон, чтобы получить пробел между кнопками.

Установите правое поле на кнопках:

Надеюсь, это то, что вы ищете.

Спасибо d.coder — это решило вопрос о марже. Кнопки по-прежнему выровнены по левому краю. Как мне отцентрировать их на странице?

Почему «все еще», когда вы никогда не упоминали, что вы хотели, чтобы они были выровнены по центру? Вы должны отредактировать свой вопрос, чтобы включить это.

Можете ли вы добавить снимок экрана текущего выхода? Я не могу судить, какие именно изменения помогут решить вашу проблему.

d.coder — спасибо за вашу поддержку. Я смог просто добавить «текстовый центр» на контейнер и получить желаемое.

Ещё вопросы

0 переменная объема не изменяется — angularjs
0 varchar m: d: YH: i: s для преобразования формата даты и времени в mysql
0 ng-repeat возвращает TypeError: невозможно прочитать свойство ‘insertBefore’ из null
1 Атрибуты класса, определенные в __init __ (), против атрибутов, определенных методом класса
1 Android LinearLayout не выглядит одинаково на реальном устройстве
0 Очень простая настройка CSS и HTML: почему моя страница показывает случайные результаты?
0 Как загрузить jQuery перед кодом CSS?
1 С чего начать для NodeJS?
1 Буфер глубины OpenGL испорчен
0 HTML-тег div слева, свойства правого поля работают по-разному для разных браузеров
1 Бесконечный цикл с обновленным атрибутом внутри события изменения базовой модели
1 Как использовать атрибут «android: inputMethod»?
1 Регулярный экспресс для таких шаблонов, как 1.1, 2.-1, 2.3.30
0 столкнулся с проблемой с угловым фильтром
0 Ajax In QueryMethod Вызов в классическом Asp для отправки электронной почты
0 Математика: Хранение 11 значений в 1
0 Как я могу поделиться переменными между представлениями, с тем же контроллером в AngularJS?
1 Hadoop не производит вывод
1 Использование itertools для условия с перечислением для получения только определенных индексов списка (python)
1 Проблемы новичка с Eclipse и запуска импортированного файла .jar?
0 Добавление чего-либо в массив
0 DBCP XAMPP не принимает мой часовой пояс
0 Разница между php и python mongodb адаптером
0 объединить 2 sql запрос местоположения и средний рейтинг
0 php добавляет новые поля в массив и отображает его
0 мониторинг пакетов в случайном режиме с помощью ns2
1 Unity — CommandInvokationFailure: сборка Gradle завершилась неудачно
0 Как зациклить анимацию в jQuery
0 MySQL 5.7 изменяет блокировку оператора DDL таблицы, но должна допускать одновременный DML
1 Составление листа Excel с использованием Python и Matplotlib?
1 Определение владельца, к которому принадлежит пользователь в ASP.NET
1 Ошибка при выполнении MavenCli в цикле (maven-embedder)?
0 Ошибка MySQL: 1251 не может добавить внешний ключ
1 Jsoup удалить конкретный идентификатор TR
1 Ввод Python не работает должным образом при использовании внутри оператора if
1 Неверное значение константы с использованием переменной в качестве параметра
1 Как можно увеличить размер значков на вкладке Элементы?
1 Firebase: убедитесь, что данные были переданы в Firebase перед запуском остальной части скрипта
1 Фильтрация результатов по пересечению коллекций?
0 На Hover добавить / удалить класс для div ребенка
1 Как использовать + = (Добавить И) с пониманием списка
1 Как использовать ресурс, ссылающийся на родительское представление?
0 Расчет итогов для строк и столбцов в дизайнере отчетов Pentaho
0 проблемы с плагином проверки jQuery и входным файлом
0 Laravel PHP: создание объекта по умолчанию из пустого значения ошибки
1 Когда люди говорят объект, когда они говорят о регулярных выражениях, что они имеют в виду (Python)
1 Как бороться с большим массивом (100.000 объектов)?
0 Методы событий плагина в Virtuemart для статуса заказа
1 C # добавить схему в URI
1 Как перехватить определенный интерфейс в Java?

Источник

Как убрать отступы между кнопками в CSS?

Начну с самого главного, учу вёрстку, поэтому не судите строго! Скачал PSD-шаблон сайта и пытаюсь по нему сверстать. Дошёл до навигационной панели, и тут у меня возникли проблемы с кнопками. Не знаю как убрать отступы между ними!
Надо чтоб они впритык друг к другу стояли margin: 0; ставил padding: 0; тоже ставил.
Вот HTML-код(Всё это находится в )

    Линия 1 Линия 2 
 
   Линия 1 Линия 2 
 
   Линия 1 Линия 2

.dropbtn < background-color: #FCFCFC; color: #989898; font-size: 15px; border: 2px solid #989898; font-family: pfdintextcondpro-regular; height: 40px; width: 180px; font-weight: bold; text-align: left; transition: all 0.5s ease; >.dropbtn i < color: #424242 !important; display: inline; text-align: right !important; max-width: 8em; float: right; height: 50%; margin-top: 2.5%; >nav < margin-left: 50px; >.dropdown < position: relative; display: inline-block; transition: all 0.5s ease; >.dropdown-content < display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 16px 16px 0px rgba(0,0,0,0.2); z-index: 1; transition: all 0.5s ease; >.dropdown-content a < color: black; padding: 10px 9px; text-decoration: none; display: block; position: relative; transition: all 0.5s ease; >.dropdown-content a:hover < background-color: #ddd; transition: all 0.5s ease; >.dropdown:hover .dropdown-content < display: block; transition: all 0.5s ease; >.dropdown:hover .dropbtn < background-color: #EDEDED; border-radius: 0px; transition: all 0.5s ease; >.dropbtn:hover

P.S. Ещё небольшой вопрос, надо как то сделать чтобы всплывающая панель была размером с кнопки, я знаю как это делать, но есть ли способ что-бы когда я меняю размер кнопки, чтоб вместе с ним менялась всплывающая панель?

Источник

Расстояние и разделение между кнопками

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

div class="darkbg">div id="menubar"> div class="lcol"> ul class="hr"> li>a href="index.php" class="knopka">1/a>/li> li>a href="music" class="knopka">2/a>/li> li>a href="video" class="knopka">3/a>/li> li>a href="mail.html" class="knopka">4/a>/li> /ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

> ul.hr { margin: 0; /* Обнуляем значение отступов */ padding: 0px; /* Значение полей */ } ul.hr li { display: inline; /* Отображать как строчный элемент */ margin-right: 0px; /* Отступ слева */ padding: 0px; /* Поля вокруг текста */ } a.knopka { color: #fff; /* цвет текста */ text-decoration: none; /* убирать подчёркивание у ссылок */ user-select: none; /* убирать выделение текста */ background: rgb(212,75,56); /*фон кнопки */ padding: .7em 1.5em; /* отступ от текста */ outline: none; /* убирать контур в Mozilla */ } a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */ a.knopka:active { background: rgb(152,15,0); } /* при нажатии */ >

Расстояние между кнопками
Всем привет! У меня есть 2 кнопки, но у них нету расстояния между ними. Как решить эту проблему.

Расстояние между кнопками
Здравствуйте, есть проблема с кнопками, а именно расстояние между ними line-height не помогает.

Расстояние между кнопками
можно ли стандартными средствами css и html, сделать так чтоб расстояние "а" между кнопками.

Задать расстояние между кнопками?
Подскажите как задать расстояние между кнопками не сдвигая их в лево ? Пробовала margin: 2px; но.

li class="border">a href="index.php" class="knopka">1/a>/li> li class="border">a href="music" class="knopka">2/a>/li> li class="border">a href="video" class="knopka">3/a>/li> li>a href="mail.html" class="knopka">4/a>/li>

.border { border-right: 1px solid blue; }

Источник

Удалите пробелы между кнопками в HTML, CSS

Я хочу удалить пробелы между кнопками, так что, когда я, например, навешиваю над кнопкой NORMAL, между ним и кнопкой HARD не будет пробела. Как я могу это сделать и откуда берутся эти пробелы?

body < margin: 0; >#stripe < background-color: white; text-align: center; height: 50px; color: black; >button < border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: black; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; >button:hover < color: white; background: black; >.selected

Либо удалите пробелы и каретки, либо поместите комментарий HTML между ними.

body < margin: 0; >#stripe < background-color: white; text-align: center; height: 50px; color: black; >button < border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: black; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; >button:hover < color: white; background: black; >.selected

Браузеры всегда добавляют пробелы между некоторыми элементами, включая кнопки. Чтобы удалить их, вам необходимо установить размер шрифта равным нулю для своего родительского контейнера. Затем, чтобы восстановить размер текста внутри кнопок, установите для них размер шрифта.

Если используется начальная загрузка, можно сгруппировать кнопки вместе, поместив в div значение Пример для v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single

Визуально может или не может быть то, что вы хотите. Имеет закругленные углы на левом и правом концах и прямую линию между кнопками. Может, возможно, рестайлинг.

по умолчанию устанавливаются некоторые пропитки (paddings, margin, fonts..), попробуйте добавить файл сброса yss css, как обычный css файл

/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.1.0 build: 2026 */ htmlbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,tdtablefieldset,imgaddress,caption,cite,code,dfn,em,strong,th,varlicaption,thh1,h2,h3,h4,h5,h6q:before,q:afterabbr,acronymsupsubinput,textarea,selectinput,textarea,selectlegend

или вы можете просто использовать

Источник

Расстояние между кнопками

У меня есть 2 кнопки, но у них нету расстояния между ними. Как решить эту проблему?

a href="?logout">button type="button" name="first" class="btn btn-primary btn-margin" tabindex="0" style="float:right;">span class="glyphicon glyphicon-remove-sign">/span> Выйти/button>/a> a style="padding-left: 100px;" href="?settings">button type="button" name="first" class="btn btn-primary btn-margin" tabindex="0" style="float:right;">Настройки/button>/a>

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

Сообщение было отмечено vitya790 как решение

Источник