使输入占用剩余空间？ [英] Make an input occupy the remaining space?

问题描述

我有这个范例：

JS FIDDLE

  
 < div class =container> 
< div class =box1> 
 
< / div> 
< input type =emailclass =form-controlid =exampleInputEmail1placeholder =John> 
< / div> 
   

CODE CSS ：

  .container {
 width：33％; 
 background：gray; 
} 
 .box1 {
 background：red; 
 width：45px; 
 height：32px; 
 display：inline-block; 
} 
输入{
 display：inline-block; 
 vertical-align：top; 
 height：32px; 
} 
  

我想做的是使我的输入更多并占据剩余空间。

我的容器的宽度为百分比，Box1的宽度为像素（应该保留）。

你告诉我请问用什么方法来解决这个问题？

解决方案

一种方法是使用 calc（） function 设置输入的 width ，如下所示：

  width：calc（100％ -  32px）; 
  

您可以在 caniuse.com 。

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.

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