css中的最大最小宽度

Question

我有以下输入框。

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

在做窄屏时看起来很糟糕。

一看 -

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

代码 -

我正在使用输入as-

价格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

我认为您已添加display: inline;尝试display: inline-block;这可能会解决问题。