Как изменить размер кнопки в html

Размер текста внутри кнопки

Можете задавать размер текста в единицах vw . Например: font-size:1.4vw; . Но учтите, что на мобильных устройствах текст может быть слишком мелким, а на больших экранах — слишком большим.

15 дек 2016 в 11:48
@Pyramidhead Спасибо, помогло!
15 дек 2016 в 11:56
@Pyramidhead Создайте ответ на основе комментария, раз автору вопроса это помогло.
15 дек 2016 в 12:34

1 ответ 1

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

Можете задавать размер текста в единицах vw (1vw = 1% от ширины окна). Например: font-size:1.4vw; .

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

Отслеживать
ответ дан 15 дек 2016 в 13:03
Pyramidhead Pyramidhead
2,178 12 12 серебряных знаков 17 17 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Курсы javascript

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

09.01.2011, 19:56
Регистрация: 04.04.2008
Сообщений: 6,245

повесить обработчик события на соответствующее событие кнопки
в нем менять ответственные за размер CSS(хотя для размера, можно и только свойства-атрибуты поменять) у необходимой нам кнопки

09.01.2011, 19:56
Регистрация: 25.05.2010
Сообщений: 511
Последний раз редактировалось Vulkan, 09.01.2011 в 19:59 .
09.01.2011, 20:02
Новичок на форуме
Регистрация: 09.01.2011
Сообщений: 3
спасибо)) только вот у меня еще задача, что бы она при повторном нажатии уменьшалась обратно))
09.01.2011, 20:07
Регистрация: 04.04.2008
Сообщений: 6,245

Значит вам надо запомнить где-то, изначальные размеры кнопки, и флаг ее состояния.
например в глобальной переменной.
а затем в функции-обработчике события, в зависимости от флага состояния выставлять одно из значений размера
PS это наиболее простой вариант для полного новичка.
он работает, хотя и не является best practice

Gtk4 linux. Как изменить размер кнопки на форме?

Вот, вопрос, как изменить размер (width, height) кнопок на форме?

wersto8top
28.12.21 08:13:47 MSK

Ответить на это сообщение
Ссылка

Вот так изменяется размер самой всей формы приложения: gtk_window_set_default_size (GTK_WINDOW (win), 600, 200); а мне нужно изменить размеры (height, width) кнопок на форме..

wersto8top
( 28.12.21 08:37:02 MSK ) автор топика

Ответить на это сообщение
Ссылка

Определи сетку GtkGrid, в ячейки которых ты потом поместишь свои кнопки, а так, как у тебя сейчас скорее всего, кнопки напрямую являются потомками окна и они будут просто занимать всё его пространство.

P.S. файл по первой ссылке недоступен.

PhysShell ★★
( 28.12.21 08:48:21 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от PhysShell 28.12.21 08:48:21 MSK

Перезалил на другое файлохранилище. https://usaupload.com/5Bne/software.zip там реально небольшой код..

По факту, я знаю базовые основы программирования..Мне, по идее, нужно осмыслить только построение форм на gtk4 из c++ linux и можно начатьь делать разные программки для xubuntu, ubuntu, kubuntu.

wersto8top
( 28.12.21 08:58:16 MSK ) автор топика

Ответить на это сообщение
Показать ответы
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 08:58:16 MSK

PhysShell ★★
( 28.12.21 09:07:04 MSK )

Ответить на это сообщение
Показать ответы
Ссылка

Ответ на: комментарий от PhysShell 28.12.21 09:07:04 MSK

У ТСа пока только разрешение сидеть за компьютером и в интернет, разрешения на гуглить пока ещё нет.

vvn_black ★★★★★
( 28.12.21 09:16:49 MSK )
Последнее исправление: vvn_black 28.12.21 09:17:02 MSK (всего исправлений: 1)

Ответить на это сообщение
Ссылка

Ответ на: комментарий от PhysShell 28.12.21 09:07:04 MSK

и после этого можно начинать писать разные поисковые движки

man-from-36
( 28.12.21 09:27:09 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от man-from-36 28.12.21 09:27:09 MSK

Вот, не понимаю, как разместить текст справа от кнопок. Технически, от элемент формы нужно разместить справа от другого элемента формы. https://ibb.co/VxJpfqJ это то, что мне нужно? https://runebook.dev/ru/docs/gtk/treewidgetobjects#id-1.4.17.2.8 чтобы расположить элементы формы в нужных местах формы? типа, делим форму на ячейки, а в ячейках распологаем нужные мне элементы формы (кнопки, листинги, текстовые поля и т.д.)? Я понимаю в веб-разработке (html+css), просто прописал название тега к нужной кнопке или другому элементу html-страницы, в css-стилях…И просто добавил к этим css-стилям свойства: width: 20px; и height: 20px; и все…Так, просто. Странно, что в gtk4 на linux такого нет. Ведь, тогда можно было бы просто и легко создавать gui-приложения и gui-программы для gtk4 на многие дистрибутивы linux.

wersto8top
( 28.12.21 11:12:51 MSK ) автор топика

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 11:12:51 MSK

А чего ты не понимаешь, когда у тебя в коде GtkBox и там явно указана вертикальная ориентация и ты прицепил к нему все свои контролы:

 box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5); gtk_box_set_homogeneous (GTK_BOX (box), TRUE); gtk_window_set_child (GTK_WINDOW (win), box); . gtk_box_append (GTK_BOX (box), btn1); gtk_box_append (GTK_BOX (box), btn2); gtk_box_append (GTK_BOX (box), lab);

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

И у тебя вместо табов в исходнике используются пробелы, используй табуляцию.

PhysShell ★★
( 28.12.21 11:40:49 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от PhysShell 28.12.21 11:40:49 MSK

Да, вижу про grid … : https://docs.gtk.org/gtk4/method.Grid.attach.html , вот нужно, сейчас прописать правильно синтаксис grid, с другими widget .

wersto8top
( 28.12.21 16:35:46 MSK ) автор топика

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 16:35:46 MSK

Странно, про gtk4 вот что написано здесь: https://docs.gtk.org/gtk4/migrating-3to4.html#reduce-the-use-of-generic-container-apis .. : «GTK 4 removes gtk_container_add() and gtk_container_remove(). While there is not always a replacement for gtk_container_remove() in GTK 3, you can replace many uses of gtk_container_add() with equivalent container-specific APIs such as gtk_box_pack_start() or gtk_grid_attach(), and thereby reduce the amount of work you have to do at the time of the switch…..» Непонятно какую использовать функцию для добавления grid’a в форму?

wersto8top
( 28.12.21 17:06:36 MSK ) автор топика

Ответить на это сообщение
Показать ответы
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 17:06:36 MSK

Непонятно какую использовать функцию для добавления grid’a в форму?

В Getting Started есть это под комментарием:

Pack the container in the window

gag ★★★★★
( 28.12.21 17:16:42 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от gag 28.12.21 17:16:42 MSK

У меня ничего нет..значит, кто-то в рф, стал нарушат гос.управление людьми в интернете….мне выдача Google в 2009-2011 годах нормально искала по исходным кодам на github, а сейчас, смотрю выдачу google, вообще почти ничего не ищет по исходным кодам на github.

wersto8top
( 28.12.21 17:19:53 MSK ) автор топика

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 17:19:53 MSK
gag ★★★★★
( 28.12.21 17:50:32 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от gag 28.12.21 17:50:32 MSK

Создаю кнопку так: btn1 = gtk_button_new_with_label («Hello.»); gtk_widget_set_size_request(btn1, 20, 60); создается, все хорошо…но почему функция gtk_widget_get_width(btn1) выдает в результат 0?

wersto8top
( 29.12.21 08:34:28 MSK ) автор топика

Ответить на это сообщение
Ссылка

Ответ на: комментарий от wersto8top 28.12.21 17:06:36 MSK

Непонятно какую использовать функцию

Используйте для начала разметку оформления кода в комментариях, неопрятные портянки читать тяжело. Ссылки на описания прямо под формой ввода комментария же, после слова «Внимание».

hobbit ★★★★★
( 29.12.21 10:43:47 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Ответ на: комментарий от hobbit 29.12.21 10:43:47 MSK

Создаю textArea на gtk4 форме.. GtkWidget *textview = gtk_text_view_new (); придаю ему размер gtk_widget_set_size_request(textview,100,100); добавляю его на форму в grid gtk_grid_attach (GTK_GRID (grid), textview,400, 3, 50, 50); все работает.. https://ibb.co/7QS1GKW но как добавить, удалить, модфицировать текст в этой textarea на gtk4? читаю про какой то буфер не понимаю…

wersto8top
( 29.12.21 17:34:37 MSK ) автор топика

Ответить на это сообщение
Ссылка

Вроде видел новость, что сделали новый дизайнер для GTK4, но сходу нагуглить не смог

IIIypuk ★★★
( 30.12.21 01:48:10 MSK )

Ответить на это сообщение
Показать ответ
Ссылка

Решено Как изменить размер кнопки и как выровнять сетку категорий

Учить CSS.
Вам нужно не только кнопку поправить, но и отображение товаров на разных устройствах.
Посжимайте окно браузера и поймёте что я имею в виду.
А править это всё нужно будет в style.css файле вашей текущей темы.

Классы отвечающие за вашу кнопку ниже

.woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product a.add_to_cart_button < /**Тут нужно прописать новые стили для кнопки, за размер кнопки отвечает свойство width**/ >

Даже не знаю что и сказать.
Удачи!

Deviw

Новичок

Если бы я хорошо знал CSS я бы не просил помощи на форуме «Новичков».

qwer

Специалист

Местный
Если бы я хорошо знал CSS я бы не просил помощи на форуме «Новичков».

Я не пыталась вас обидеть.
Просто это достаточно распространенный вопрос, который является основами изучения HTML и СSS.
И поиск смог бы вам помочь решить ваш вопрос.

Не по теме:
У вас прописаны стили:

.woocommerce ul.products li.product

Настоятельно рекомендую убрать их — они ломают всю вёрстку.
На расширении 320 (одно из самых популярных на мобильных устройствах)
Было(когда включен стиль width: 16%):

Стало(когда выключить стиль width: 16%. Удобно для пользователя, который будет просматривать сайт с телефона):

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

А править это всё нужно будет в style.css файле вашей текущей темы.
Классы отвечающие за вашу кнопку ниже

.woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product a.add_to_cart_button < /**Тут нужно прописать новые стили для кнопки, за размер кнопки отвечает свойство width**/ >

Просто размер вы сами подберите, какой будет отвечать вашим запросам.
Мне понравилось когда я выставила 146px;
и убрала width: 16%;
Смотрите:

И вот, если выставить для кнопки 150px;
и оставить width: 16%;

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

Обратите внимание на первый вложенный скрин, этот стиль ломает всю вёрстку вашего вывода товаров. Если оставлять width: 16% придётся прописывать медиазапросы для разных разрешений экранов, тестировать, менять, менять, менять и ещё раз менять.
Надеюсь, смогла помочь.
Удачи!