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

时间:2018-10-26 11:33:48

标签: html css

enter image description here

我只是想使“搜索”按钮占据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>

3 个答案:

答案 0 :(得分:2)

最简单的方法是在跨度上使用与输入相同的填充。 (考虑到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>

答案 1 :(得分: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>

答案 2 :(得分:0)

在这里,我刚刚将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>