我正在尝试制作一个小键盘按钮。这是 fiddle 代码:numpad
如果你在 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%;
}
最佳答案
行内元素对空白很敏感,所以你需要去掉 input 元素之间的空格:
<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;
}
关于css - Firefox 中输入字段之间的奇怪差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21225164/