移動輸入框寬度不均

我想製作一個紙質計算器，它工作正常，但是有一個設計問題。移動輸入框寬度不均

輸入框在電腦屏幕上正確顯示，即使在響應選項（您可以選擇屏幕大小），但在實際的手機上，輸入框沒有相同的寬度。

HTML代碼：

<div class="container-fluid"> 

<div id = "case_one" class="calcoptions sizemod"> 

<h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5> 
<br>  

Length: <input type="number" step="0.01" name="length_in" id="txt_weight" placeholder="Length(inch)" style = "width:auto;" min="0" onkeyup="calculateWeightInInches();"> 
<br><br> 

Width: &nbsp;&nbsp;<input type="number" style = "width:auto;" step="0.01" name="width_in" id="txt_width" placeholder="Width(inch)" min="0" max='300' onkeyup="calculateWeightInInches();"> 
<br><br> 

GSM: &nbsp;&nbsp;&nbsp;<input type="number" style = "width:auto;" min="5" max="800" step="0.01" name="length_in" id="txt_GSM" placeholder="GSM" onkeyup="calculateWeightInInches();"> 
<br><br> 

Weight: <input type="number" style = "width:auto;" step = "0.01" name="Weight_Kg" id = "txt_Result" readonly="readonly"> 
<br><br> 
</div>

CSS：

::-webkit-input-placeholder { 


text-align: center; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    text-align: center; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    text-align: center; 
} 

:-ms-input-placeholder { 
    text-align: center; 
} 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 0; 
} 

input[type='number'] { 
    -moz-appearance:textfield; 
} 

@media only screen and (max-width: 900px) { 
    .sizemod {  
    display: none; 


    } 
} 

@media (min-width: 858px) { 
    html { 
     font-size: 12px; 
    } 
} 

@media (min-width: 780px) { 
    html { 
     font-size: 11px; 
    } 
} 

@media (min-width: 702px) { 
    html { 
     font-size: 10px; 
    } 
} 

@media (min-width: 724px) { 
    html { 
     font-size: 9px; 
    } 
} 

@media (max-width: 623px) { 
    html { 
     font-size: 8px; 
    } 
} 

select { 
     font-family: Arial, sans-serif; 
     font-size: 10px; 
     /*font-style: italic;*/ 
    } 
    select#fixed { 
     -webkit-appearance: none; 
    } 

textarea { 
    width: 20px; 
}; 

input[type="number"] { 
    width: 20px; 
};

在PC：

在實際手機：

附： style = width：auto;標籤剛剛添加，沒有工作。

來源

2017-06-20 Ayush Mandowara

你完全錯了，如果你期望'width：auto'會達到你想要的。你希望他們都是相同的寬度 - 那麼你將不得不在某處指定寬度。 – CBroe

我會建議使用80％的相對寬度作爲輸入字段。這樣你就可以使它依賴於你可以在media querie中調整的container-div'case_one'。進一步在像素中添加最大寬度以將相對寬度限制爲您喜歡的大小。 'input {width：80％;最大寬度：200px;}' 也不知道你想如何地址字段，但如果你做的名字請注意，你命名的第一和第三個領域一樣：length_in – mikesp

你應該記住的一件事是，他們是兩個不同的瀏覽器，所以他們可以採取不同的行爲。我也建議使用設置寬度，而不是自動。將寬度設置爲自動會基本上告訴瀏覽器按照需要進行操作，這是您的情況。

希望這會有所幫助！

來源

2017-06-20 13:01:58 salwine

移動輸入框寬度不均

回答

相關問題