Как сделать расстояние между кнопками в html

Сообщений: 8

Задать расстояние между кнопками?

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

.button-origin

echo ' :sort_tab_len('.$totalRows_Recordset1.', \'data\', \'\', \'0\', 1)">Дата
'; echo ' :sort_tab_len('.$totalRows_Recordset1.', \'f_cena_\', \'\', \'0\', 1)">Цена
';

if($totalRows_Recordset1) :sort_tab_len('.$totalRows_Recordset1.', \'data\', \'\', \'-1\', '.$orders.')">  ".$fww."
"; > else echo ' :sort_tab_len('.$totalRows_Recordset1.', \'data\', \'\', \'-1\', 1)">    ".$fww."
"; > else echo ' :sort_tab_len('.$totalRows_Recordset1.', \'f_cena_\', \'\', \'-1\', 1)">


Изображения 


 
Image 11.png (5.9 Кб, 368 просмотров)


Пользователь
Регистрация: 15.05.2018
Сообщений: 75
Попробуйте margin-right:2px; или сколько пикселей Вам нужно. Когда Вы прописываете margin:2px; то получаете отступ по 2 пикселя со всех сторон, поэтому кнопки и убегают.
Не задавай вопрос, если не знаешь что делать с ответом.
Расстояние между кнопками
У меня есть 2 кнопки, но у них нету расстояния между ними. Как решить эту проблему?
1 2 3 4
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>
Заранее спасибо!

Лучшие ответы ( 1 )

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями: 
Расстояние между кнопками
можно ли стандартными средствами css и html, сделать так чтоб расстояние "а" между кнопками.
Расстояние между кнопками
Здравствуйте, есть проблема с кнопками, а именно расстояние между ними line-height не помогает.

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

2587 / 1678 / 732

Регистрация: 13.03.2010

Сообщений: 5,636

Сообщение было отмечено vitya790 как решение
Как задать расстояние между пунктами списка?

Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.
Читать:
Как сделать в zoom задний фон на компьютере
Пример 2. Использование line-height

создание пунктуальности (никогда не будете никуда опаздывать);
излечение от пунктуальности (никогда никуда не будете торопиться);
изменение восприятия времени и часов.

Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.

Рис. 2. Межстрочное расстояние

Рис. 3. Межстрочное расстояние при переносе строк
См. также

line-height
line-height в CSS
margin-bottom
Атрибут bottommargin

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

Как увеличить расстояние между кнопками, например в 10px? Для увеличения расстояния между кнопками на 10px можно использовать CSS свойство margin . Например, если у вас есть кнопки с классом button , то вы можете добавить следующее правило в ваш CSS файл:
Это добавит отступ справа от каждой кнопки в размере 10px. Если вы хотите увеличить расстояние между всеми кнопками, то можете использовать селектор button без класса:
Но помните, что изменение стилей может повлиять на внешний вид вашего сайта, поэтому будьте осторожны и проверяйте результаты изменений перед публикацией.
А как же добавить еще и анимацию, чтобы при наведении курсора на кнопку в десктопной версии она немного увеличивалась бы в размере?
Для добавления анимации при наведении на кнопку, вы можете использовать CSS свойство transform и псевдокласс :hover . Например, если у вас есть кнопки с классом button , то вы можете добавить следующее правило в ваш CSS файл:
css 
.button:hover transform: scale(1.1); 
> 
Это добавит анимацию увеличения размера кнопки на 10% при наведении на нее курсора мыши. Если вы хотите изменить продолжительность анимации, то можете использовать свойство transition . Например:
css 
.button transition: transform 0.3s ease-in-out; 
>
.button:hover transform: scale(1.1); 
> 
Это добавит плавную анимацию увеличения размера кнопки на 10% за 0.3 секунды с эффектом замедления в начале и в конце анимации.