时间戳

首页 > 解决方案 > 无法使用百分比调整 HTML 输入的大小

html - 无法使用百分比调整 HTML 输入的大小

问题描述

我无法使用百分比调整输入框的大小。我真的遇到了麻烦，因为一旦我在其他计算机上运行代码，它就不能正确显示，这实际上应该取决于它的 div 的大小。

这是输入的代码

.input_box{
    height: 50px;
    background-color: #F8F8FF;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 10px;
}

而这里是输入框所在的div的代码

.div_input_box{
display: flex;
justify-content: space-between;
}

标签： htmlcss

解决方案

在您的输入中添加flex: 1;或：flex-grow: 1;

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

.div_input_box {
  display: flex;
  justify-content: space-between;
  background:#eee;
}

.input_box {
  flex-grow: 1;    /* Add this */
  height: 50px;
  background-color: #F8F8FF;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 10px;
}
<div class="div_input_box">
  <input class="input_box" type="text" placeholder="Your value here">
</div>

推荐阅读