css中的最大最小宽度

Question

我有以下输入框.

我减小了它们的宽度以使它们在线对齐,并且在全尺寸窗口中看起来很好,现在当我做窄屏时出现问题.

做窄屏时看起来很糟糕.

看看-

我尝试使用这些输入框来设置新线max-width.

在代码中 -

我正在使用输入 -

价格Ex.增值税-

  <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;
 }
}