如何将输入与容器的高度匹配？

Posted 2021-04-30

我的目标是创建一个可重用的数字字段，并带有可自定义的递增/递减按钮。但是，我的问题是我无法使输入字段正确填充容器的高度。

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: row;
  outline: auto;
  outline-color: red;
}

input {
  height: 100%;
  width: 75%;
  text-align: center;
}

.button-container { 
  width: 25%;
  display: flex;
  flex-direction: column;
}

button {
  height: 50%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

我在最新版本的Chrome上的搜索结果：

我在这里找不到解决此特定问题的任何问题。任何输入将不胜感激。

答案

您需要做的就是从输入中删除高度，如下所示

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: row;
  outline: auto;
  outline-color: red;
}

input {
  width: 75%;
  text-align: center;
}

.button-container { 
  width: 25%;
  display: flex;
  flex-direction: column;
}

button {
  height: 50%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

另一答案

有几种方法：

1. 使input的height: auto（默认）代替height: 100%
2. 为box-sizing: border-box;添加input
3. 或手动添加border: 0; padding: 0;代替

解释：

从这里：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

在CSS盒子模型中，默认情况下，宽度和分配给元素的高度仅应用于元素的内容框

因此，您声明为height: 100%的input仅计算为content部分。同时，input具有默认的padding和border，它们加起来使您的元素看起来很奇怪。

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: row;
  outline: auto;
  outline-color: red;
}

input {
  height: 100%; /* delete this */
  
  box-sizing: border-box; /* or instead, add this */

  border: 0; /* or these */
  padding: 0;

  width: 75%;
  text-align: center;
}

.button-container { 
  width: 25%;
  display: flex;
  flex-direction: column;
}

button {
  height: 50%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

以上是关于如何将输入与容器的高度匹配？的主要内容，如果未能解决你的问题，请参考以下文章

css有用的代码片段

当 listview 行项目中包含隐藏视图时，片段不尊重匹配父高度

jQuery 获取容器宽度和长度

如何从一组中继容器中组合片段？

使用 TextField 更改容器的高度

ListView布局高度与Fragment中的RecyclerView内的父级不匹配