輸入文本字段和按鈕的寬度變化動態

我想讓當調整屏幕我的文本字段的寬度可以變化的動態，在平均時間我有輸入文本字段和按鈕的寬度變化動態

@media (max-width: 767px) { 
    #nameinput {width:auto;}     
} 
@media (min-width:1025px){ 
    #nameinput{ width:300pt;}     
} 
<div style="left: 20px; width:805pt" > 
    <label for="inputname"><b><%=bt%></b></label> 
    <input id="nameinput" name="nameinput" style="font-size:10pt; text-transform: uppercase; "> 
</div>

但輸入框也突然變得小不逐步根據屏幕尺寸
（變化最大寬度：一些更大數量然後可以看到文本字段逐漸改變）
當屏幕小到足以導致標籤和輸入框分開兩行文本字段變得非常大再次

來源

2017-10-09 cactus

給予寬度的問題，所以它會改變動態 – Gattbha

使用相對單位像％作爲@HirenPatel建議或EM。像px或pt這樣的絕對單位是剛性的 - 你打算用打印機打印這個表單嗎？如果您打算使用打印機，那麼pt單位是最好的，但對於在屏幕上顯示最差（實際上可能是最差的）。 – zer00ne

使用以下的CSS可以避免我提到上面％

#nameinput{ 
       max-width: 300pt; 
       width: 80%; 
       min-width: 60pt; 
       }

來源

2017-10-26 07:44:35 cactus

您可以在小屏幕上給你的容器100% width並指定你的大屏幕300pt。

@media (max-width: 767px) { 
    #nameinput {width:100%;} 
} 
@media (min-width:1025px){ 
    #nameinput{ width:300pt;}    
}

來源

2017-10-09 04:47:08 Anuresh

文本字段仍然看起來像變化不變或減少到一半。 – cactus

您是否添加了此元標記 – Anuresh

我有 – cactus

輸入文本字段和按鈕的寬度變化動態

回答

相關問題