CSS如何使<span>与<input />的高度相同？

Question

我只是想使“搜索”按钮占据input的全部高度。您可以看到背景颜色仅适用于文本区域。除了将填充应用于btn之外，还有什么其他方法可以使它在input填充被更改的情况下自动放大吗？

.GroupSearch {
  text-align: center;
}

.GroupSearch__input {
  width: 500px;
  padding: 10px 10px;
  vertical-align: middle;
}

.GroupSearch__search-btn {
  vertical-align: middle;
  background-color: rgb(0, 92, 128);
  color: white;
  height: 100%;
}

<div className="GroupSearch">
  <input className="GroupSearch__input" type="text" placeholder="Enter Your Group Name" />
  <span className="GroupSearch__search-btn">Search</span>
</div>

Answer 1

最简单的方法是在跨度上使用与输入相同的填充。 （考虑到input和span具有相同的font-size和line-height）。另外input具有默认的border-width:2px，因此填充将变为padding:12px 10px。

其他解决方案将包括flexbox。但这是快速解决方法：

.GroupSearch {
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.GroupSearch__input {
  width: 500px;
  padding: 10px 10px;
  vertical-align: middle;
  font-size: 14px;
}

.GroupSearch__search-btn {
  vertical-align: middle;
  background-color: rgb(0, 92, 128);
  color: white;
  height: 100%;
  padding: 12px 10px;
  font-size: 14px;
}

<div class="GroupSearch">
  <input class="GroupSearch__input" type="text" placeholder="Enter Your Group Name" />
  <span class="GroupSearch__search-btn">Search</span>
</div>

Answer 2

Flexbox会默认执行该操作。

.GroupSearch {
  text-align: center;
  display: flex;
}

.GroupSearch__input {
  width: 500px;
  padding: 10px 10px;
}

.GroupSearch__search-btn {
  background-color: lightblue;
  color: white;
  display: flex;
  align-items: center;
}

<div class="GroupSearch">
  <input class="GroupSearch__input" type="text" placeholder="Enter Your Group Name" />
  <span class="GroupSearch__search-btn">Search</span>
</div>

Answer 3

在这里，我刚刚将display: table放在外部容器上，并将display: table-cell放在内部项目上（输入和范围）。
display: table上的Read more

此外，您可以在按钮上添加一些左右填充，使它看起来有点宽敞。

.GroupSearch {
  text-align: center;
  display: table;
}

.GroupSearch__input {
  width: 500px;
  padding: 10px 10px;
  vertical-align: middle;
  display: table-cell;
}

.GroupSearch__search-btn {
  vertical-align: middle;
  background-color: rgb(0, 92, 128);
  color: white;
  height: 100%;
  display: table-cell;
}

<div class="GroupSearch">
  <input class="GroupSearch__input" type="text" placeholder="Enter Your Group Name" />
  <span class="GroupSearch__search-btn">Search</span>
</div>