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

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

CSS:

CSS:

CSS:

Как поставить две кнопки в одной строке, используя только HTML и CSS?

• Изменена структура элемента.
• удалено свойство float и добавлено отображение: встроенный блок в классе входа и регистрации
• добавлен класс btn-контейнера

.btn-group button <
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
>

.btn-group button:not(:last-child) <
border-right: none; /* Prevent double borders */
>

/* Clear floats (clearfix hack) */
.btn-group:after <
content: «»;
clear: both;
display: table;
>

/* Add a background color on hover */
.btn-group button:hover <
background-color: #3e8e41;
>

Выравнивание нескольких select в один ряд
Всем привет, как можно выравнять option’ы в ряд ? Длинный теееееекс.

how to have two button in one line

I have a dialog box where I want to have two button side by side .One button will be «Done» button and other will be «close» button.

I already have a «done» button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.

5 Answers 5

You have display set to block. It needs to be set to inline-block .

If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.

Put each button in a div and have the float attribute set to left.

Makes the buttons set themselves on different rows. If you apply float: right; on them both, you’ll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.

Add the element above to the «bottom» of the element that wraps the buttons, so that they won’t «break loose» from their place and float outside the box.

Since it’s got a display:block; , you can specify it’s width , and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.

Using nobr can help you solve this problem.

The Overflow Blog

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.13.43308

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Группа кнопок

Сгруппируйте несколько кнопок в одну строку или сложите их в вертикальный столбец.

Простой пример

Оберните серию кнопок с помощью .btn в .btn-group .

Убедитесь, что role правильная, и укажите метку

Для того, чтобы вспомогательные технологии (например, программы чтения с экрана) передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут role . Для групп кнопок это будет role="group" , в то время как панели инструментов должны иметь role="toolbar" .

Кроме того, группам и панелям инструментов следует давать явные метки, поскольку в противном случае большинство вспомогательных технологий не будут их объявлять, несмотря на наличие правильного атрибута роли. В приведенных здесь примерах мы используем aria-label , но также можно использовать такие альтернативы, как aria-labelledby .

Эти классы также могут быть добавлены к группам ссылок в качестве альтернативы навигационным компонентам .nav navigation components.

Устанавливаем кнопки социальных сетей в один ряд

Всем привет. В этой статье разберемся, где взять кнопки таких социальных сетей как Вконтакте, Твиттер, Фейсбук и Гугл+, а также с тем, как сделать, чтобы эти кнопки располагались ровно в один ряд. У новичков, которые решили установить себе такие кнопки, часто это не получается, и кнопки наезжают одна на другую, либо просто располагаются друг под другом.

Думаю, что никому не нужно объяснять, как важно наличие этих кнопок на сайте. На самом деле сделать кнопки в один ряд очень легко, и сейчас я покажу, как сделать такую же строчку с социальными кнопками, как у меня на блоге в конце каждой статьи.

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

1. Кнопка “Твитнуть” от Твиттера.

Чтобы получить кнопку “Твитнуть” перейдите по этой ссылке и в левом верхнем углу страницы выберите русский язык.

Затем из предложенных вариантов кнопок выберите “Отправить URL-адрес”. После выбора необходимо заполнить все данные:

Здесь я все оставил как есть, кроме последнего пункта “Язык”. Выберите русский язык, и в правой части будет показана ваша кнопка в таком виде, в каком она будет на сайте. Там же указан код, который необходимо будет вставить на сайт.

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

2. Кнопка “Мне нравится” от Вконтакте.

Заходим на страницу разработчиков Вконтакте и заполняем все необходимые данные для получения кнопки:

Если вы еще не подключали ваш сайт в панели разработчиков, то первым делом делаем это – вводим название сайта, его адрес, выбираем тематику и жмем “Сохранить”. Далее выбираем вид кнопки, ее высоту и название. Ниже в окошке появляется код для вставки, который нам и нужен.

Этот код состоит из двух частей. Первая часть:

Эту часть нужно вставить между тегами ‹head› и ‹/head› (для этого откройте файл header.php), но если вы на своем сайте уже используете какие-нибудь виджеты Вконтакте, например комментарии, то эту часть кода вам вставлять уже не надо, так как она уже у вас есть.

Вторую часть кода, а именно:

необходимо скопировать так же, как и код для кнопки “Твитнуть”, этот код понадобится позже.

3. Кнопка Google +1.

Заходим на эту страницу и, как обычно, заполняем все данные.

С кодом для кнопки G+ делаем то же, что и в предыдущем пункте. Первую часть кода мы сохраняем в документе для дальнейшего использования:

Вторую часть кода помещаем в файл header.php между тегами ‹head› и ‹/head›:

4. Кнопка “Мне нравится” от Facebook.

И, наконец, получим код для кнопки “Мне нравится” Фейсбука. Для этого переходим на страницу разработчиков и видим там такую панель:

Поле “URL to Like” оставляем пустым, в списке “Layout” выбираем нужный стиль оформления кнопки и убираем галочки “Show Friends’ Faces” и “Include Share Button”. После этого нажимаем кнопку “Get code”.

Первую часть кода вставляем сразу после открывающегося тега ‹body› в файле header.php (не нужно этого делать, если вы уже устанавливали комментарии Facebook), а вторую часть сохраняем.

Итак, мы нашли коды для всех кнопок, теперь нужно все эти кнопки вставить в нужное нам место в конце статьи в один ряд.

Для этого открываем файл single.php и находим там место, где заканчивается статья. Обычно текст статьи в wordpress заключен в тег ‹div >