Html css中的最大最小宽度

我有以下输入框

我缩小了它们的宽度，使它们对齐，在全尺寸窗口中看起来很好，现在当我缩小屏幕时，问题就出现了

做窄屏幕的时候看起来很糟糕

一个外观-

我尝试使用这些输入框来设置

max width

以获得新行

在代码中-

我使用输入作为-

除增值税外的价格-

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

但在制作窄屏幕时，它并没有得到新的线条

我希望这些输入块具有所需的响应性布局-

---

执行媒体查询并使其阻止元素-

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

---

你就快到了。必须使用

minwidth

来防止元素在特定宽度后收缩

---

将代码中的

max width

替换为

min width

，然后重试。另外，您可能需要指定

max-width:nPixels-px

以防止文本框在全屏显示时占据85%的宽度。

我认为您添加了

显示：内联尝试
显示：内联块
这可能会解决问题。
您希望使包装元素
显示：block
，因为标签必须与输入一起显示到新行，而不仅仅是输入。但原则是好的。@Vinet，我认为这对所有现有的输入元素都适用，但我希望在一个页面上完成。@Manoz，如果这个答案对您有效，请选择它作为更正。您是如何设置它们的样式的？（CSS代码）当我用min width设置时，这些元素现在没有重叠，但它没有采用新的线条。您使用什么方法来对齐元素？