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

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

введите сюда описание изображения

Как сделать кнопки на одном уровне? https://jsbin.com/deqecileke/3/edit?html,css,output

Отслеживать

задан 19 июн 2023 в 11:04

11 1 1 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.wrap < display: flex; >.item < display: flex; flex-direction: column; width: 50%; outline: 1px solid red; >.item button

  1





 title





 
  
 2





 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quis aliquam hic corrupti eius sunt non quasi repellendus ducimus doloremque magni amet, molestiae error, porro facilis, similique modi eos! Cupiditate!

Отслеживать

ответ дан 19 июн 2023 в 13:48

27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Горизонтальная группа кнопок

Здесь вы узнаете, как сделать горизонтальную «группу кнопок» при помощи CSS.

Горизонтальные группы кнопок

Набор кнопок, собранных вместе в горизонтальную группу:

Apple Samsung Sony
Apple Samsung Sony

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

Шаг 1) Добавляем HTML:

Шаг 2) Добавляем CSS:

 .btn-group button < background-color: #04AA6D; /* Зеленый фон */ border: 1px solid green; /* Зеленая рамка */ color: white; /* Белый текст */ padding: 10px 24px; /* Некоторый отступ */ cursor: pointer; /* Иконка указателя/руки */ float: left; /* Выстраиваем кнопки рядом друг с другом */ >.btn-group button:not(:last-child) < border-right: none; /* Исключаем двойную рамку */ >/* Сбрасываем обтекание (clearfix hack) */ .btn-group:after < content: ""; clear: both; display: table; >/* Добавляем фон при наведении курсора */ .btn-group button:hover

Выравненная по ширине группа кнопок

Как сделать круглую кнопку?

Круглая кнопка обычно используется в тех случаях, когда вместо текста на кнопке выводится иконка или одиночный символ. Вот некоторые ситуации, где использование круглых кнопок имеет смысл: навигация по страницам; управление аудио и видеоплеером, переключение между слайдами в карусели, отправка формы.

Чтобы кнопка получилась именно круглой, в стилях для класса .round следует установить одинаковые ширину и высоту и задать радиус скругления 50% через свойство border-radius. Скругление каждого уголка на половину размера элемента и даст в итоге круг. У кнопки следует ещё убрать рамку через свойство border, её браузеры добавляют по умолчанию.

button.round < width: 30px; height: 30px; /* Размеры кнопки */ background-color: #e03e25; /* Цвет фона */ border-radius: 50%; /* Радиус скругления */ border: none; /* Убираем рамку вокруг кнопки */ >

Само выравнивание картинки внутри по вертикали или горизонтали делать не нужно, она и так окажется в центре кнопки. Окончательный код с полем для поиска и круглой кнопкой для отправки формы показан в примере 1.

Пример 1. Круглая кнопка

Кнопка