使输入占用剩余空间？ | 使输入占用剩余空间

本文介绍了使输入占用剩余空间？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个范例：

设置输入的 width ，如下所示：

  width：calc（100％ -  32px）;

您可以在。

I have this sample:

JS FIDDLE

CODE HTML:

<div class="container">
  <div class="box1">

  </div>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="John">
</div>

CODE CSS:

.container{
  width:33%;
  background:grey;
}
.box1{
  background:red;
  width:45px;
  height:32px;
   display:inline-block;
}
input{
  display:inline-block;
  vertical-align:top;
  height:32px;
}

What I want to do is make my input more and occupy the remaining space.

My container has a width in percent and Box1 has a width in pixels (should remain).

Can you tell me please what method to use to solve this problem?

解决方案

One way to do it would be to use the calc() function to set the width of your input, like so:

width:calc(100% - 32px);

You can check browser support for this function on caniuse.com.

这篇关于使输入占用剩余空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！