Чтобы сделать кнопки одинакового размера в CSS, можно использовать следующие способы:
- Указать фиксированную ширину и высоту для кнопок:
button {
width: 100px;
height: 40px;
}Этот код задает фиксированные размеры для всех кнопок на странице.
- Использовать относительные единицы измерения, такие как em, rem, или %, чтобы кнопки масштабировались относительно размера родительского контейнера или экрана пользователя:
button {
width: 50%;
height: 3em;
}Здесь мы устанавливаем ширину кнопок в 50% от ширины родительского контейнера и высоту равную 3 em.
- Использовать flexbox для создания гибких элементов управления:
.container {
display: flex;
justify-content: space-between;
}
button {
flex: 1;
}Здесь мы создаем флекс-контейнер, который располагает кнопки с помощью свойства justify-content. С помощью свойства flex мы задаем равную долю пространства для каждой кнопки внутри контейнера.
- Добавить класс для всех кнопок и применить к ним стили, чтобы установить одинаковый размер для всех:
<button class="my-btn">Кнопка 1</button>
<button class="my-btn">Кнопка 2</button>
<button class="my-btn">Кнопка 3</button>.my-btn {
width: 100px;
height: 40px;
}Здесь мы добавляем класс «my-btn» для всех кнопок на странице и применяем к ним стили, которые устанавливают фиксированные размеры.
Вы можете выбрать любой из этих способов, который лучше всего подходит для ваших нужд.
