firefox中輸入字段之間的奇怪差距

我想做一個數字鍵盤按鈕。下面是小提琴代碼：numpad firefox中輸入字段之間的奇怪差距

，如果你在Firefox打開這個，你會發現有兩個垂直間隙（如1和2之間）

我想消除這兩個缺口，但沒有任何線索他們來自Firefox。

如何解決？

下面是我的HTML代碼：

 <div style="width: 755px; margin: 0 auto; "> 
    <div class="button-pad"> 
      <input type="button" value="1" onclick="" /> 
      <input type="button" value="2" onclick="" /> 
      <input type="button" value="3" onclick="" /> 
     </div> 
     <div class="button-pad"> 
      <input type="button" value="4" onclick="" /> 
      <input type="button" value="5" onclick="" /> 
      <input type="button" value="6" onclick="" /> 
     </div> 
     <div class="button-pad"> 
      <input type="button" value="7" onclick="" /> 
      <input type="button" value="8" onclick="" /> 
      <input type="button" value="9" onclick="" /> 
     </div> 
     <div class="button-pad"> 
      <input type="button" value="" /> 
      <input type="button" value="0" onclick="" /> 
      <input type="button" value="" onclick="" style="background-image:url(./img/clear.jpg);background-repeat:no-repeat;background-position:center"/> 
     </div> 
    </div>

這裏是我的CSS：

.button-pad > input{ 
background-color: #EAEAEA; 
border: 1px solid #666666; 
color: #000000; 
font-size: 40px; 
font-weight: bold; 
padding: 15px; 
width: 15%; 

}

enter image description here

來源

2014-01-20 JavaScripter

您可以嘗試添加'浮動：left'和調整寬度以適應。 – luke2012

我身邊好看，沒有發現任何問題 – chen

你沒有看到兩個空白的差距嗎？列之間..... – JavaScripter

內聯元素是空白敏感的，所以你需要擺脫的輸入元素之間的空格：

<input type="button" value="1" onclick="" /><input type="button" value="2" onclick="" /><input type="button" value="3" onclick="" />

另外，如果你希望所有的按鈕直接彼此相鄰，你的CSS更改爲：

.button-pad > input { 
    background-color: #EAEAEA; 
    border: 1px solid #666666; 
    color: #000000; 
    font-size: 40px; 
    font-weight: bold; 
    padding: 15px; 
    width: 15%; 
    vertical-align:top; 
    margin:0; 
}

jsFiddle example

來源

2014-01-20 03:25:44 j08691

謝謝。這很有幫助。 – JavaScripter

firefox中輸入字段之間的奇怪差距

回答

相關問題