css中的最大最小宽度

时间:2013-03-28 05:55:07

标签: html css

我有以下输入框。

enter image description here

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

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

一看 -

enter image description here

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

代码 -

我正在使用输入as-

价格Ex。大桶 -

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

但在进行窄屏时,它并没有获得新的界限。

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

enter image description here

3 个答案:

答案 0 :(得分:7)

进行媒体查询并使其成为块元素 -

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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