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

Answer 2

你快到了。您必须min-width用于防止元素在特定宽度后收缩。

在您的代码中替换max-width为min-width，然后重试。此外，您可能需要指定max-width: nPixels px;以防止文本框在全屏时占据 85% 的宽度。

Answer 3

I think you have added display: inline; try display: inline-block; this may solve the problem.