输入文本和按钮相同的高度顶部对齐

Question

我有2个按钮输入和它们之间的文本输入。正如您在JsFiddle上看到的那样，文本输入与按钮不对齐。如何将顶部对齐文本和按钮？

.incriDecriButton {
  border:1px solid #cdcdcd;
  width:16px;
  height:24px;
  background-color:whitesmoke;
  border-radius:1px;
  text-align:center;
  font-size:16px;
  padding:0px;margin:0px;
}
.inputText-Quantity {
  border:1px solid #cdcdcd;
  height:22px;
  width:30px;
  font-size:10px;
  margin-top:-5px !important;
  text-align:center
}

<input type='button' class='incriDecriButton' value='-' /><input type='text' class='inputText-Quantity' maxlength='4' /><input type='button' class='incriDecriButton' value='+' />

Answer 1

已更改height，已添加display和vertical-align：

.incriDecriButton {
  border:1px solid #cdcdcd;
  width:16px;
  height:24px;
  background-color:whitesmoke;
  border-radius:1px;
  text-align:center;
  font-size:16px;
  padding:0px;margin:0px;
  vertical-align: bottom;
  line-height: 1;
  display: inline-block;
}
.inputText-Quantity {
  border:1px solid #cdcdcd;
  height:20px;
  width:30px;
  font-size:10px;
  margin-top:-5px !important;
  text-align:center;
  vertical-align: bottom;
  line-height: 1;
  display: inline-block;
}

<input type='button' class='incriDecriButton' value='-' /><input type='text' class='inputText-Quantity' maxlength='4' /><input type='button' class='incriDecriButton' value='+' />

预览

Answer 2

试试这个...... codepen

<input type='button' class='incriDecriButton' value='-' /><input type='text' class='inputText-Quantity' maxlength='4' /><input type='button' class='incriDecriButton' value='+' />


.incriDecriButton {
    border:1px solid #cdcdcd;
    width:16px;
    height:24px;
    background-color:whitesmoke;
    border-radius:1px;
    text-align:center;
    font-size:16px;
    padding:0px;margin:0px;
}
.inputText-Quantity {
    border:1px solid #cdcdcd;
    height:20px;
    width:30px;
    font-size:10px;
    margin-top: -5px !important;
    text-align:center;
    display: inline-block;
    vertical-align: bottom;


}