我有以下输入框。
我减小了它们的宽度以使它们在线对齐,并且在全尺寸窗口中看起来很好,现在当我做窄屏时出现问题。
在做窄屏时看起来很糟糕。
一看 -
我尝试使用这些输入框来设置max-width
。
代码 -
我正在使用输入as-
价格Ex。大桶 -
<input type="text" style="width:85%;max-width:85%;" id="Order" maxlength = "10" name="PriceExVat" onkeypress="validate(event)"/>
但在进行窄屏时,它并没有获得新的界限。
我希望这些输入块具有所需的响应式布局 -
答案 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;
这可能会解决问题。