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

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

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

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

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

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

Просто измените «150» на столько пикселей, сколько хотите для данной кнопки. Вы также можете попробовать «ширина: 20%;» и просто измените «20» на то, что вы хотите. «20%» означает, что кнопка будет иметь ширину в 20 процентов от вашего порта просмотра (он же ваш экран).

Очевидно, измените «СДЕЛАТЬ НЕКОТОРЫЙ ТЕКСТ ЗДЕСЬ!» на то, что вы хотите, чтобы кнопка сказала, например, «ПОДПИСАТЬСЯ!» или «ПОПРОБУЙ СЕБЯ!» или что угодно.

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

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

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

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

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

Когда у меня в css есть следующее, подчеркивание под ссылками в IE и Firefox «удваивается». Я видел, что некоторые веб-сайты имеют одинаковое семейство шрифтов, одинаковый размер шрифта, выделены жирным шрифтом, а подчеркивание не удваивается. Как сделать подчеркивание только одной строкой, а не двумя (1px против 2px). Простой CSS, который будет работать во всех браузерах (если возможно). Я знаю, что могу использовать border-bottom для решения проблемы, но мне эта идея не очень нравится.

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

3 ответа

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

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

Альтернативой технике border-bottom , предложенной в нескольких других сообщениях, является использование inset box-shadow , например:

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

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

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

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

6 ответов

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

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

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

Для меня решением было просто поместить 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 для тех же результатов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *