Расположить рядом кнопки html

Содержание

CSS, HTML кнопки рядом друг с другом
2 ответа
Как сделать — Группу кнопок
Создать группу кнопок
Пример
Пример
Группа кнопок с выравниванием/полной шириной:
Пример
ВЫБОР ЦВЕТА
Сообщить об ошибке
Ваше предложение:
Спасибо Вам за то, что помогаете!
CSS, HTML кнопки рядом друг с другом
2 ответа
Как упорядочить кнопки в один ряд?

CSS, HTML кнопки рядом друг с другом

Я бы поставил обе друг друга (например, «Старт || Стоп |» ). Я могу, но я должен использовать правило «position: relative» css, а пустое пространство было ниже кнопок, которые мне не нужны. Как я могу поместить две кнопки друг на друга в переносном режиме? Спасибо Обновление: Я опустил ширину обеих кнопок до 48 пикселей, и теперь они вписываются в правильное положение. Но между кнопкой, которую я не могу управлять, есть 2px-пробел, я попытался наложить padding: 0 на div или margin: 0 на кнопки, но ничего. Обновление: я нашел ответ на свой последний вопрос здесь

Почему вы хотите использовать две кнопки? Вы также можете сделать это с помощью одной кнопки, динамически изменяя текст.

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

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

Но я не знаю, почему расстояние между двумя кнопками составляет 2 пикселя, как я могу его устранить? Я пробовал заполнение = 0, но не работает.

2 ответа

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

Использование float:

А для этого нужно добавить элемент после плавающих элементов с ясными: оба стиля, чтобы контейнер расширялся до высоты плавающих элементов.

Использование встроенного блока

встроенный блок имеет преимущество (если не больше) над float, так как вам не нужен элемент очистки после плавающих, если это необходимо.

Кон с использованием встроенного блока, однако, состоит в том, что если у вас есть свои элементы в вашем источнике на отдельных строках, он добавит пробел между вашими элементами. Для этого есть несколько работ:

Использование размера шрифта 0px в родительском объекте и сброс размера шрифта в дочерних элементах.
Помещение всех элементов рядом друг с другом, то есть:
Помещение закрывающего тега на следующую строку и рядом со следующим элементом, то есть:

Хотя они не делают для аккуратного выглядящего исходного кода

Использование Flex

Пара преимуществ flex (среди прочих) заключается в том, что вам не нужно беспокоиться о пробеле между элементами, а элементы могут сжиматься и расти по мере необходимости с помощью настроек различных стилей flex.

Таким образом, вы можете выбрать то, что подойдет вашему макету сайта.

Источник

Как сделать — Группу кнопок

Сгруппируйте ряд кнопок вместе на одной строке в группе кнопок:

Создать группу кнопок

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.btn-group button <
background-color: #4CAF50; /* Зеленый фон */
border: 1px solid green; /* Зеленая граница */
color: white; /* Белый текст */
padding: 10px 24px; /* Немного отступов */
cursor: pointer; /* Указатель/значок руки */
float: left; /* Плавают кнопки бок о бок */
>

.btn-group button:not(:last-child) border-right: none; /* Предотвращение двойных границ */
>

/* Очистить поплавки (clearfix) взлом */
.btn-group:after content: «»;
clear: both;
display: table;
>

/* Добавить цвет фона при наведении курсора */
.btn-group button:hover background-color: #3e8e41;
>

Группа кнопок с выравниванием/полной шириной:

Пример

Совет: Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

CSS, HTML кнопки рядом друг с другом

2 ответа

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

Использование float:

Использование встроенного блока

Использование размера шрифта 0px в родительском объекте и сброс размера шрифта в дочерних элементах.
Помещение всех элементов рядом друг с другом, то есть:
Помещение закрывающего тега на следующую строку и рядом со следующим элементом, то есть:

Хотя они не делают для аккуратного выглядящего исходного кода

Использование Flex

Таким образом, вы можете выбрать то, что подойдет вашему макету сайта.

Источник

Как упорядочить кнопки в один ряд?

Кнопки в футере сайта располагаются скопом (а не в одну линию, как первые три).
Просьба помочь в решении данной проблемы неопытному. Коды кнопок(как они в редакторе расположены) и скрин, прилагаю.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

 script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2913648">/script> noscript> a href="http://top100.rambler.ru/navi/2913648/"> img src="http://counter.rambler.ru/top100.cnt?2913648" alt="Rambler's Top100" border="0" /> /a> /noscript>  a href="http://metrika.yandex.ru/stat/?id=21526339&from=informer" target="_blank" rel="nofollow">img src="//bs.yandex.ru/informer/21526339/2_0_FFFFFFFF_FFFFFFFF_0_pageviews" style="width:80px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры)" />/a>  script type="text/javascript"> (function (d, w, c) < (w[c] = w[c] || []).push(function() < try < w.yaCounter21526339 = new Ya.Metrika(); > catch(e) < >>); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () < n.parentNode.insertBefore(s, n); >; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") < d.addEventListener("DOMContentLoaded", f, false); >else < f(); >>)(document, window, "yandex_metrika_callbacks"); /script> noscript>div>img src="//mc.yandex.ru/watch/21526339" style="position:absolute; left:-9999px;" alt="" />/div>/noscript>  a href='http://priwed.com' style='vertical-align:top;display:inline-block;margin:0px;background:#006699 url([url]http://priwed.net/knopka.png[/url]) no-repeat scroll left top;width:88px;height:31px;text-decoration:none;text-align:center;font-size:10px;font-weight:regular;font-family:Arial;color:#FFF !important;overflow:hidden;line-height:49px;' target='_blank' title='PriWed Свадьба'>СВАДЬБА/a> a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="">Нравится/a> script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8">/script> script type="text/javascript">  document.write(VK.Share.button()); --> /script> div id="ok_shareWidget">/div> script> !function (d, id, did, st) < var js = d.createElement("script"); js.src = "http://connect.ok.ru/connect.js"; js.onload = js.onreadystatechange = function () < if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") < if (!this.executed) < this.executed = true; setTimeout(function () < OK.CONNECT.insertShareWidget(id,did,st); >, 0); > >>; d.documentElement.appendChild(js); >(document,"ok_shareWidget","http://xn----8sbef2a3acatmfwg.xn--p1ai/",""); /script>

Как выстроить кнопки в ряд?
Не могу допетрить, как перенести чекбокс и кнопки delete и edit в один ряд с full news, если.

Как поставить 2 таблицы в один ряд
Как поставить 2 таблицы в одну строку в WordPress? Почему то когда я создаю новую таблицу любых.

Как поставить кнопку в один ряд с текстом
Как сделать так чтобы иконка которая изображает открыта или закрыта шторка стояла после текста а не.

Как оформить картинку и текст в один ряд?
В общем-то, сабж. Прикрепил картинку с примером того, что должно получится.

Разместить их в таблицу. или в дев. по другому никак.

Добавлено через 8 минут
Пример:

table> tr> td> /td> td> /td> td> /td> /tr> /table>

Отображение текстовых блоков в один ряд, как на изображении
Нужно сделать так, чтобы текстовые блоки были изображены как на картинке, но у меня не выходит. Вот.

Как сделать по умолчанию отмеченным один из пунктов кнопки radio
Всем привет! Возникла небольшая задача по css, нужно чтобы при загрузке страницы, по умолчанию был.

Как открыть один документ html из другого по нажатию кнопки?
К примеру вводится логин и пароль. Если существует такая страница html, название которой совпадает.

Как удалить один ряд в массиве?
помогите, не знаю как удалить ряд в массиве?

Источник