max min ширина в css

Question

У меня есть следующие поля ввода.

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

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

look-

Я попробовал эти поля ввода, чтобы получить новую строку с настройкой max-width.

В коде -

Я использую вход как-

Для цены Ex. Vat-

<input type="text" style="width:85%;max-width:85%;" id="Order" maxlength = "10" name="PriceExVat" onkeypress="validate(event)"/> 

Но он не получает новую линию, делая узкий экран.

Я хочу, чтобы это желательно отзывчивым макет для этих входных блоков-

Answer 1

ли медиа-запрос и сделать их блоковые элементы -

@media all and (max-width: 500px) and (min-width: 0px) { 
input[type="text"] { 
    display:block; 
} 
} 

Answer 2

Вы почти там. Вы должны использовать min-width для предотвращения сокращения элементов после определенной ширины.

Замените max-width на min-width в вашем коде и повторите попытку. Также вы можете указать max-width: nPixels px;, чтобы помешать текстовым полям занимать 85% ширины, когда на полном экране.

Answer 3

Я думаю, вы добавили display: inline; попробуйте display: inline-block; это может решить проблему.