css中的最大最小宽度

Question

我有以下输入框。

我减少了他们的宽度调整它们的行，它看起来在全尺寸的窗口不错，当我这样做窄屏幕现在出现的问题。

做窄屏幕看起来很糟糕。

一个look-

我尝试了这些输入框，以获得新的符合设立max-width。

在代码 -

我使用的输入原样

对于出厂价格。 Vat-

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

但是，它并没有得到一个新的行，而在做狭窄的屏幕。

我要为这些输入此需要的响应式布局blocks-

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;这个可以解决问题。