Как задать размер кнопки CSS в процентах?

Question

[daminik00]

Не получается задать размер input type submit в процентах. Подскажите

Вот код: https://jsfiddle.net/2gz619vt/

Answer 1

[daminik00]

Алексей Очень смешно. Но у меня не работает в браузерах если я указываю ширину и высоту input type submit в процентах

Comments

[Алексей]

Какой вопрос - такой ответ.
Вы бы что ли код свой привели, выложили его на codepen.io или jsfiddle.net.

[Алексей]

Например вот - https://jsfiddle.net/n19kxegw/ - 50% ширины.
Что у вас не получается - надо смотреть, может ошибка какая.

[daminik00]

https://jsfiddle.net/2gz619vt/

[tema_sun]

daminik00: а что не так? Все работает - 50% ширина с отступом 25%.

[Алексей]

daminik00: Не заметил ответа, так как он не в моей ветке.
У вас все как написано - так и работает - ширина кнопок ровно 50%, левый отступ 25%.
Что у вас не получается.

[daminik00]

tema_sun: Присмотрись внимательнее. Размеры текстового поля отличаются от размера сабмита

[Алексей]

Может у вас браузер какой-то специфический?
Вот мой скриншот - joxi.ru/Q2KxM6bI9kXwqA.png

[daminik00]

Алексей: Присмотрись внимательнее. Размеры текстового поля отличаются от размера сабмита

[Алексей]

daminik00: Вижу, сразу не заметил, сорри.

[tema_sun]

Алексей: box-sizing: border-box; к .input добавь.

[Алексей]

https://jsfiddle.net/2gz619vt/4/ - Тут поможет - box-sizing: border-box;

[Алексей]

Кратко - свойство указыват как расчитывать ширину - учитывать ли бордер, отступы, подробнее о вариантах значений - htmlbook.ru/CSS/box-sizing

[Алексей]

tema_sun: Из-за того что поле ввода белое - я сразу не заметил что оно шире :)

[daminik00]

Алексей: tema_sun: Спасибо, а почему может не работать высота инпутов в процентах?

[Алексей]

daminik00: Чтобы работала высота - должен быть контейнер, относительно которого она бы считалась - https://jsfiddle.net/2gz619vt/7/ - без этого у вас как бы документ не на весь экран, а по размеру кнопок.

[tema_sun]

daminik00: у родительского элемента должна быть указана явная высота.

[Алексей]

daminik00: Либо указать в единицах "vh" - https://jsfiddle.net/2gz619vt/8/ - но там новые заморочки вылезут.

[tema_sun]

daminik00: https://jsfiddle.net/qzou25tr/

[daminik00]

Алексей: контейнер

вообще так проще наверное будет skurl.ru

[daminik00]

Алексей: ОЙ, есть контейнер

[tema_sun]

daminik00: form'е высоту укажите

[daminik00]

tema_sun: А почему box-sizing: border-box; не работает на телефоне ?

[tema_sun]

daminik00: у меня на андроиде работает

[daminik00]

tema_sun: не могли бы скинуть скриншот на почту [e-mail] . Если не сложно, отправьте пожалуйста

Answer 2

[Алексей]

Подсказываю - htmlbook.ru/css/value/percent
UPD. https://jsfiddle.net/2gz619vt/4/ - Тут поможет - box-sizing: border-box;

Answer 3

[AlexandrKom]

ширина в процентах будет рассчитываться относительно родителя - смотрите свойства контейнера
высоту я задаю через font-size + line-height, не думаю что правильно было бы задавать ее в процентах