按钮匹配字段的高度？

Question

我想让一些按钮与场地的高度相同...... 由于每个浏览器的高度不同，我必须遗漏一些明显的东西：

input {
    font-size:16px;
    padding:8px;
    display:inline-block;
    border:1px solid #ccc;
    box-shadow:inset 0 1px 3px #ddd;
    border-radius:0px;
    vertical-align:middle;
    box-sizing:border-box;
    line-height:20px;
}

button {
    font-size:16px;
    display:inline-block;
    background:#ffffff;
    border: 1px solid #ccc;
    cursor:pointer; color:#b2b2b2;
    font-weight:700; padding:8px;
    line-height:20px;
    vertical-align:middle;
    box-sizing:border-box;
}

<button>-</button><input type="text"/><button>+</button>

Answer 1

尝试flexbox，将您的内容包装到.container并将其设为flex。它的孩子会被容器的高度垂直拉伸。

＆＃13;

＆＃13;

.container,
.contained > * {
  box-sizing: padding-box;
}
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 38px;
}
input,
button {
  border: 1px solid #ccc;
  border-radius: 0px;
}
input {
  font-size: 16px;
  box-shadow: inset 0 1px 3px #ddd;
}
button {
  width: 30px;
  font-size: 16px;
  background: #ffffff;
  cursor: pointer;
  color: #b2b2b2;
}

＆＃13;

<div class="container">
  <button>-</button>
  <input type="text" />
  <button>+</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将高度设置为按钮和输入：

height: 40px;

https://jsfiddle.net/v6pLqbfz/1/