删除输入字段之间的间距

亚当·格里菲思

我的输入字段之间有一些小间距。我该如何删除?另外,确认按钮的垂直位置似乎与其他元素不同,为什么?屏幕截图如下:

在此处输入图片说明

.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>

贾钦·哈加尔
  1. 输入之间的间距是由于新行
  2. 要垂直对齐按钮,请添加line-height.confirmBtn.clearBtn
  3. 对于勾号,请使用适当的HTML代码 &#10003;

例:

.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="&#10004;">
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章