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;這個可以解決問題。