Как сделать кнопки одинакового размера css

Добавил пользователь Skiper
Обновлено: 05.10.2024

Есть ли способ контролировать размер переключателя в CSS?

ОТВЕТЫ

Ответ 1

Да, вы должны иметь возможность устанавливать высоту и ширину, как и для любого элемента. Однако некоторые браузеры не учитывают эти свойства.

Как вы увидите, кнопка настройки стиля не просто: -D

Ответ 2

Хотя старый вопрос, у него было больше всего голосов по этому вопросу. У меня есть другое решение, с которым я столкнулся недавно. Кажется, этот css делает трюк.

Настройка границы на 0, по-видимому, позволяет пользователю изменять размер кнопки и отображать браузер таким образом, например. высота выше: 2em будет отображать кнопку в два раза выше высоты строки. Это также работает для флажков (input [type = checkbox]). Некоторые браузеры выглядят лучше других.

В окне окна он работает в ie8 +, ff21 +, chrome29 +.

Ответ 3

Изменение размера виджета по умолчанию не работает во всех браузерах, но вы можете создавать пользовательские переключатели с помощью JavaScript. Один из способов - создать скрытые радиокнопки, а затем разместить свои собственные изображения на своей странице. Нажатие на эти изображения изменяет изображения (заменяет щелкнутое изображение изображением с радиокнопкой в выбранном состоянии и заменяет другие изображения радиокнопками в невыбранном состоянии) и выбирает новый переключатель.

Во всяком случае, есть документация по этому вопросу. Например, прочитайте следующее: Флажки для стилизации и радио кнопки с CSS и JavaScript.

Ответ 4

Не напрямую. Фактически, элементы формы вообще либо проблематичны, либо невозможны для стиля, используя только CSS. наилучшим подходом является:

Скрыть переключатель с помощью javascript.
Использовать javascript для добавления/отображения HTML, который можно стилизовать так, как вам нравится.
Определить правила css для выбранного состояния, которое запускается добавлением класса "selected" в диапазон yuor.
Наконец, напишите javascript, чтобы заставить состояние переключателя реагировать на клики по диапазону, и наоборот, чтобы получить промежуток, чтобы реагировать на изменения состояния переключателя (когда пользователи используют клавиатуру для доступа к форме), вторая часть этого может быть сложной для работы во всех браузерах. Я использую что-то вроде следующего (в котором также используется jQuery. Я также избегаю добавления дополнительных интервалов путем стилизации и применения "выбранного" класса непосредственно к меткам ввода).

Ответ 5

Вы можете управлять размером кнопки радио с помощью стиля css:

style = "height: 35px; width: 35px;"

Это напрямую контролирует размер кнопки.

Ответ 6

Старый вопрос, но теперь есть простое решение, совместимое с большинством браузеров, которое должно использовать CSS3 . Я тестировал в IE, Firefox и Chrome, и он работает.

Измените значение 1.5 , в этом случае с шагом 50% в соответствии с вашими потребностями. Если соотношение очень высокое, оно может размыть переключатель. На следующем изображении показано соотношение 1,5.

Ответ 7

Непосредственно вы не можете этого сделать. [Согласно моим знаниям].

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

Ответ 8

Здесь один подход. По умолчанию переключатели примерно в два раза больше, чем метки.
(См. Код CSS и HTML в конце ответа)

Ответ 9

Вы также можете использовать свойство transform с требуемым значением в масштабе:

Ответ 10

Это отлично работает для меня во всех браузерах:

(встроенный стиль для простоты. )

Размер как переключателя, так и текста будет изменяться с помощью размера шрифта метки.

Использование HTML для стилизации таких вещей, как кнопка, не является предпочтительным способом сделать это. (Ну, когда я начал создавать веб-сайты в 1999 году, именно так мы и сделали, но сейчас есть и лучшие способы.)

Я предполагаю, что вы не знакомы с CSS и как импортировать CSS-файл в ваш HTML-файл (хотя я рекомендую поискать его в Google, когда у вас есть немного времени, чтобы поработать с кодом и заняться самообучением).

Итак, вот лучший способ, которым я могу придумать, чтобы выполнить то, что вы хотите сделать, основываясь на том знании, которое, я думаю, у вас уже есть:

ОСТАВЬТЕ НЕКОТОРЫЙ ТЕКСТ ЗДЕСЬ!

Надеюсь, это поможет!

Определите класс для вашей кнопки. Это будет с привязкой, кнопкой или тегами ввода.

Напишите стиль для кнопки имени класса.

Но если вы хотите использовать этот класс для каждой кнопки на странице. Тогда используйте дополнение. Если вы зафиксировали высоту и ширину кнопки, текст может быть переполнен или находиться за пределами кнопки для различного использования имени кнопки.

Как сделать подчеркивание одинакового размера во всех браузерах с помощью css?

Спасибо за вашу помощь и предложения

3 ответа

Вы не можете контролировать, как браузеры отображают подчеркивание текста с помощью CSS. Если вам действительно нужен такой уровень контроля, не помешает использовать нижнюю границу.

Попробуйте использовать это свойство: border-width: 1px или поиграйте со свойством border-bottom

Если не указывать параметр color , по умолчанию используется цвет текста.

Как сделать элементы flexbox одинакового размера?

Я хочу использовать flexbox, в котором есть несколько элементов одинаковой ширины. Я заметил, что flexbox распределяет пространство вокруг равномерно, а не само пространство.

Первый предмет намного больше второго. Если у меня есть 3 элемента, 4 элемента или n элементов, я хочу, чтобы все они отображались в одной строке с равным количеством места для каждого элемента.

Установите их так, чтобы их flex-basis был 0 (чтобы все элементы имели одну и ту же начальную точку), и позвольте им расти:

Ваша IDE или линтер могут упомянуть, что the unit of measure ‘px’ is redundant . Если вы его не укажете (например: flex: 1 1 0 ), IE не будет его правильно отображать. Таким образом, px требуется для поддержки Internet Explorer, как упоминалось в комментариях @fabb;

Для меня решением было просто поместить overflow: hidden; в ячейки flex-grow: 1; .

Я не эксперт в гибкости, но я достиг этого, установив основу на 50% для двух пунктов, с которыми я имел дело. Вырасти до 1 и уменьшись до 0.

Встроенный стиль: flex: ‘1 0 50%’,

Принятый ответ Адама ( flex: 1 1 0 ) отлично работает для контейнеров flexbox, ширина которых либо фиксирована, либо определена предком. Ситуации, когда вы хотите, чтобы дети поместились в контейнер.

Однако у вас может возникнуть ситуация, когда вы хотите, чтобы контейнер подходил для детей, при этом дети имели одинаковый размер в зависимости от самого большого дочернего элемента. Контейнер flexbox можно подогнать под своих дочерних элементов:

установка position: absolute , а не установка width или right , или
поместите его в оболочку с помощью display: inline-block

Для таких контейнеров flexbox принятый ответ НЕ работает, дочерние элементы имеют разный размер. Я предполагаю, что это ограничение flexbox, поскольку он ведет себя одинаково в Chrome, Firefox и Safari.

Решение — использовать сетку вместо гибкого бокса.

Вам нужно добавить width: 0 , чтобы сделать столбцы равными, если содержимое элементов увеличивает их.

Для этого можно добавить flex-basis: 100% .

Как бы то ни было, вы также можете использовать flex: 1 для тех же результатов.

Узнайте, как стилизовать кнопки на веб-странице с помощью CSS.

Основные стили кнопок

Кнопка по умолчанию CSS кнопка

Пример

Цвета кнопок

Используйте свойство background-color чтобы изменить цвет фона кнопки:

Пример

Размер кнопок

Используйте свойство font-size чтобы изменить размер шрифта кнопки:

Пример

Используйте свойство padding чтобы изменить отступ кнопки:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Округлые кнопки

Используйте свойство border-radius чтобы добавить закругленные углы кнопке:

Пример

Цветные границы кнопки

Используйте свойство border чтобы добавить цветную границу для кнопки:

Пример

Кнопки при наведении мыши

Используйте селектор :hover чтобы изменить стиль кнопки при наведении на неё мыши.

Совет: Используйте свойство transition-duration чтобы определить скорость эффекта "hover" (зависания):

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

Тень кнопок

Используйте свойство box-shadow для добавления теней к кнопке:

Пример

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Отключенные кнопки

Используйте свойство opacity свойство для добавления прозрачности к кнопке (создает "отключенный" вид).

Совет: Вы также можете добавить свойство cursor со значением "not-allowed" (не разрешено), которое будет отображать значок "нет парковки" при наведении курсора на кнопку:

Пример

Ширина кнопок

По умолчанию размер кнопки определяется её текстовым содержимым (таким же по ширине, как её содержимое). Используйте свойство width , чтобы изменить ширину кнопки:

Совет: Используйте пиксели, если вы хотите установить фиксированную ширину, и используйте процент для адаптивных кнопок (например, 50% её родительского элемента).

Пример

Группы кнопок

Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:

Пример

Группа кнопок с границами

Используйте свойство border для создания группы кнопок с границами:

Пример

Вертикальная группа кнопок

Используйте display:block вместо float:left для группировки кнопок друг под другом, а не рядом друг с другом:

Пример

Кнопка на изображении

Кнопка

Анимированные кнопки

Пример

Добавить стрелку при наведении мыши:

Пример

Добавить эффект "нажатия" при клике:

Пример

Появляться при наведении:

Пример

Добавить эффект "ряби" при клике:

ПАЛИТРА ЦВЕТОВ

Получите ваш
Сертификат сегодня!

Связь с админом

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

правка дополнительного содержимого не затрагивала ранее написанные стили;
при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

/* отступы между кнопками */

/* центрируем текст кнопки по вертикали */

/* центрируем текст кнопки по горизонтали */

/* чтобы работала геометрия и отступы у тега */

/* убираем обводку у тега */

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

/* при жесткой высоте будет увеличиваться ширина */

/* … остальной код без изменения */

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

поскольку другое значение border-box не задавалось,

нужно подкорректировать размеры

/* при жесткой высоте будет увеличиваться ширина */

/* … остальной код без изменения */

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

/* центрируем содержимое по вертикали и горизонтали */

/* учитываем последующее добавление элементов */

Вот что у нас получилось:

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Ставим min-height и отступы на случай, если содержимого станет слишком много:

/* код без изменения */

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

/* тут речь идет только о box-sizing:content-box */

/* код без изменения */

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

И так тоже не делайте:

/* не задаём никакие отступы в родительском элементе */

/* код без изменения */

Резюме

Для всего, что может измениться, задавайте минимальные и максимальные размеры.
Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читайте также: