手机输入框宽度不均匀答案

【问题标题】：Input box width uneven on mobile手机输入框宽度不均匀
【发布时间】：2017-11-22 19:47:15
【问题描述】：

我正在尝试制作一个纸质计算器，它可以正常工作，但是存在设计问题。

输入框在电脑屏幕上正确显示，即使在响应选项中（您可以选择屏幕尺寸），但在实际手机上，输入框的宽度不相等。

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;
};

在电脑上：

在实际移动设备上：

附：样式=宽度：自动；刚刚加了tag，没用。

【问题讨论】：

你完全错了，如果你期望width:auto 会在这里实现你想要的。您希望它们都具有相同的宽度 - 然后您必须在某处指定该宽度。
我建议对输入字段使用 80% 这样的相对宽度。这样你就可以让它依赖于你可以在媒体查询中调整的 container-div 'case_one'。进一步添加以像素为单位的最大宽度，以将相对宽度限制为您喜欢的大小。 input {width:80%; max-width:200px;} 也不确定您要如何添加字段，但如果您按名称进行操作，请注意您将第一个和第三个字段命名为：length_in

标签： html css input width

【解决方案1】：

您应该记住的一件事是，它们是两种不同的浏览器，因此它们的行为可能不同。我还建议使用设置宽度，而不是自动。将宽度设置为 auto 本质上是告诉浏览器按照它的意愿去做，这就是你的情况。

希望这会有所帮助！

【讨论】：