Как создать две кнопки HTML рядом
Одна проблема состоит в том, что класс action_btn используется для div и button, и это мешает. Также в вашем коде div с классом action_btn выглядит как дополнительный и должен быть удален. Учитывая вышеизложенное, ваш код будет преобразован следующим образом.
используйте это в CSS, используя класс или идентификатор вашей кнопки.
это означает, что вы хотите, чтобы кнопки были рядом
Как сделать — группу кнопок
Сгруппировать серию кнопок в одну строку в группе кнопок:
Создание группы кнопок
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
.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;
>
Группа кнопок «обоснованная/полная ширина»:
Пример
Совет: Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.
Как расположить все элементы внутри </div> в одну строку в HTML?
Я новичок. разрабатываю сайт-портфолио. Имеются 2 кнопки, как расположить их в ряд? Вот отрывок из кода:
Убрать теги <p> , потому что это "параграф" и он делает перенос строки
Уже сказали, что здесь не нужен <p> — фактически это лишняя обертка, которая в данном случае еще и принудительно заставляет начинаться элементы с новой строки (потому что p — блочный элемент, а input — нет).
Вообще рекомендую изучить flexbox. Он как раз нужен для расстановки и упорядочивания нескольких элементов, то есть нужен всегда и везде. Тут это будет так:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS, HTML кнопки рядом друг с другом
Я бы поставил обе друг друга (например, «Старт || Стоп |» ). Я могу, но я должен использовать правило «position: relative» css, а пустое пространство было ниже кнопок, которые мне не нужны. Как я могу поместить две кнопки друг на друга в переносном режиме?
Обновление: Я опустил ширину обеих кнопок до 48 пикселей, и теперь они вписываются в правильное положение. Но между кнопкой, которую я не могу управлять, есть 2px-пробел, я попытался наложить padding: 0 на div или margin: 0 на кнопки, но ничего.
Обновление: я нашел ответ на свой последний вопрос здесь
2 ответа
Есть несколько способов получить элементы, расположенные рядом друг с другом.
Использование float:
А для этого нужно добавить элемент после плавающих элементов с ясными: оба стиля, чтобы контейнер расширялся до высоты плавающих элементов.
Использование встроенного блока
встроенный блок имеет преимущество (если не больше) над float, так как вам не нужен элемент очистки после плавающих, если это необходимо.
Кон с использованием встроенного блока, однако, состоит в том, что если у вас есть свои элементы в вашем источнике на отдельных строках, он добавит пробел между вашими элементами. Для этого есть несколько работ:
- Использование размера шрифта 0px в родительском объекте и сброс размера шрифта в дочерних элементах.
- Помещение всех элементов рядом друг с другом, то есть: <div></div><div></div>
Помещение закрывающего тега на следующую строку и рядом со следующим элементом, то есть:
Помещение закрывающей скобки предыдущего элемента на следующей строке и рядом с следующим элементом, то есть:
Хотя они не делают для аккуратного выглядящего исходного кода
Использование Flex
Пара преимуществ flex (среди прочих) заключается в том, что вам не нужно беспокоиться о пробеле между элементами, а элементы могут сжиматься и расти по мере необходимости с помощью настроек различных стилей flex.