Предотвратить изменение размера кнопки по количеству слов внутри кнопки
Есть ли способ предотвратить изменение размера кнопки по количеству текстовых символов внутри кнопки? У меня есть 2 кнопки с одним и тем же классом CSS, но размер одной из них отличается из-за количества символов внутри нее.
<button class = "my-btn" type = "submit">Send</button>
<button class = "my-btn" type = "button">Subscribe</button>
CSS:
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Разница между тегами Br и Wbr в HTML 5
В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...
HTML И VS CODE Для Веб-разработки
Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...
Как использовать WAI-ARIA
В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...
Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.
Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...
1
1
1 887
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Вы можете использовать максимальную ширину в классе .my-btn
Я думаю fix width это ваше решение
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
width: 150px;
}<button class = "my-btn" type = "submit">Send</button>
<button class = "my-btn" type = "button">Subscribe</button> Ответ принят как подходящий
Вам просто нужно поставить width. Ниже я дал ему 200 пикселей, вы можете изменить это по своему усмотрению.
Кроме того, примените min-width или max-width, если вы хотите, чтобы ширина не опускалась ниже или выше определенной ширины.
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
/*change width to your preference*/
width: 200px;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}<button class = "my-btn" type = "submit">Send</button>
<button class = "my-btn" type = "button">Subscribe</button>Другие вопросы по теме
Должны ли привязки класса Vue 3 с переменными быть встроенными?
Привязка класса vue к переменной объекта
Div не заполняется даже при минимальной высоте: 100%;
Добавление <img> внутрь элемента flex приводит к тому, что элемент flex расширяется, несмотря на то, что изображение достаточно маленькое, чтобы поместиться внутри
Materialise Modal overlay не закрывается
Предотвращение роста элемента td для соответствия дочерним элементам
Как заставить навигационные вкладки прокручиваться горизонтально в bootstrap 3?
Ссылки в мобильном меню (<ul> <li a>) не работают при использовании события touchend вместо события click в JavaScript
Проблемы с загрузкой - размер строки карты не изменяется при добавлении полей
Django - файл CSS не работает. Получение ошибки 404. "Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)"
Похожие вопросы
Div не заполняется даже при минимальной высоте: 100%;
Materialise Modal overlay не закрывается
Предотвращение роста элемента td для соответствия дочерним элементам
Массив JS внутри массива — добавление нового «мини-массива»
Как заставить навигационные вкладки прокручиваться горизонтально в bootstrap 3?
Проблемы с загрузкой - размер строки карты не изменяется при добавлении полей
Django - файл CSS не работает. Получение ошибки 404. "Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)"
Установите диапазон дат по умолчанию на 1 неделю, а затем сохраните введенный диапазон дат через отправку [Ruby on Rails]
Как я могу уменьшить родительский div до размера его дочернего элемента?
Javascript Показать/Скрыть текст
Дайте ему фиксированную ширину