【问题标题】:Removing spacing between input fields删除输入字段之间的间距
【发布时间】:2017-03-29 20:28:20
【问题描述】:

我拥有的输入字段之间有一些小的间距。我怎样才能删除这个?另外,确认按钮的垂直位置似乎与其他元素不同,这是为什么呢?截图如下:

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

【问题讨论】:

    标签: html css position css-position


    【解决方案1】:
    1. 输入之间的间距是因为新行
    2. 要垂直对齐按钮,请将line-height 添加到.confirmBtn.clearBtn
    3. 对于勾号,使用适当的 HTML 代码 &amp;#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>

    【讨论】:

      【解决方案2】:

      标签之间有一些不可打印的字符(隐藏)。请使用这个:

      <div class="stockWrapper"><input type="button" class="clearBtn" value="X"><input type="number" class="stock"><input type="button" class="confirmBtn" value="✓"></div>
      

      【讨论】: