Как отобразить 3 кнопки на одной строке в css
Я хочу отобразить 3 кнопки на одной строке в html. Я попробовал два варианта: Этот:
для второго варианта я использовал стиль для абзаца:
к сожалению, ни один из них не был в порядке, и я не могу найти другой вариант. Первая и вторая кнопки отображаются на одной строке, но третья отображается ниже. Вы можете мне помочь?
5 ответов
сделайте что-нибудь вроде этого,
HTML-код :
CSS:
HTML-код :
CSS:
это послужит цели. Нет необходимости в каких-либо divs или абзаце. Если вы хотите, чтобы пробелы между ними были указаны, используйте margin-left или margin-right в классах css.
вам нужно плавать все кнопки влево и убедитесь, что его ширина, чтобы поместиться внутри внешнего контейнера.
CSS:
HTML-код:
ниже будут отображаться все 3 кнопки на одной линии при условии, что для их отображения достаточно горизонтального пространства:
единственная причина, по которой кнопки не будут отображаться inline, — это если они имеют display:block, примененный к ним в вашем css.
Как поставить две кнопки в одной строке, используя только HTML и CSS?
Как правильно выровнять две кнопки рядом с небольшим промежутком между ними, используя только CSS и HTML?
Вот мои html и CSS. Две кнопки не выровнены правильно.
Что мне нужно изменить, чтобы получить желаемый результат?
5 ответов
Вот мое решение с использованием flex
В ваших классах CSS у вас больше полей в вашем классе регистров (используя первую кнопку), чем в вашем классе входа (используя вашу вторую кнопку). Они должны иметь одинаковое поле, чтобы они отображались в строке.
Например, поместите класс входа в систему так же, как класс регистрации, так:
Проверьте следующий код
- Изменена структура элемента.
- удалено свойство float и добавлено отображение: встроенный блок в классе входа и регистрации
- добавлен класс btn-контейнера
Подводя итог, вы можете захотеть плавать влево LI’s , и дать им ширину 50%, что заставит их идти бок о бок.
Затем вы хотите добавить auto к горизонтальным полям, чтобы выровнять кнопки по центру LI’s . Так что-то вроде этого: margin: 50px auto .
Ли в вашем списке — это элементы уровня блока — так, чтобы кнопки были в одной строке — просто имейте дисплей li: встроенный. Кроме того, поля для каждой кнопки были разными, поэтому их одинаковое расположение позволяет им соответствовать друг другу. Каждая кнопка плавает — одна слева и одна справа, поэтому каждая из них расположена сбоку от контейнера.
Как сделать две кнопки рядом в html
.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’ы в ряд ? Длинный теееееекс.