我输入的字段之间有一些小的间距。我该如何删除?另外,确认按钮似乎与其他元素的垂直位置不同,为什么会这样?屏幕截图如下:
.stockWrapper {
position: absolute;
display: block;
top: 10px;
margin: 0 auto;
width: 250px;
left: calc(50% - 75px);
padding: 0px;
}
.stock {
box-sizing: border-box;
width: 75px;
font-size: 2em;
margin: 0px;
width: 100px;
height: 50px;
}
.confirmBtn, .clearBtn {
box-sizing: border-box;
color: white;
font-weight: bold;
border: 1px solid black;
font-size: 2em;
margin: 0px;
width: 50px;
height: 50px;
padding: 0px;
}
.clearBtn {
background-color: red;
}
.confirmBtn {
background-color: green;
}

<div class="stockWrapper">
<input type="button" class="clearBtn" value="X">
<input type="number" class="stock">
<input type="button" class="confirmBtn" value="✓">
</div>
&#13;
答案 0 :(得分:3)
标签之间有一些不可打印的字符(隐藏)。请使用此:
<div class="stockWrapper"><input type="button" class="clearBtn" value="X"><input type="number" class="stock"><input type="button" class="confirmBtn" value="✓"></div>
答案 1 :(得分:3)
line-height
添加到.confirmBtn
和.clearBtn
✓
示例:
.stockWrapper {
position: absolute;
display: block;
bottom: 10px;
margin: 0 auto;
width: 250px;
left: calc(50% - 75px);
padding: 0px;
}
.stock {
box-sizing: border-box;
width: 75px;
font-size: 2em;
margin: 0px;
width: 100px;
height: 50px;
}
.confirmBtn, .clearBtn {
box-sizing: border-box;
color: white;
font-weight: bold;
border: 1px solid black;
font-size: 2em;
margin: 0px;
width: 50px;
height: 50px;
padding: 0px;
line-height:48px;
}
.clearBtn {
background-color: red;
}
.confirmBtn {
background-color: green;
}
<div class="stockWrapper">
<input type="button" class="clearBtn" value="X"><input type="number" class="stock"><input type="button" class="confirmBtn" value="✔">
</div>