输入占用剩余空间？

Question

我有这个样本：

JS FIDDLE

代码HTML：

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

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

代码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;
}

我想做的是让我的输入更多，并占用剩余的空间。

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

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

Answer 1

输入占用剩余空间的最佳方法是什么？

您可以使用box-sizing: border-box属性和100％的输入width来完成此操作。

*{
  box-sizing: border-box
}

小提琴

编辑

在澄清了想要的输出之后，这是一个使用calc()函数的解决方案：

input{
  display:inline-block;
  vertical-align:top;
  height:32px;
  width: calc(100% - 49px);
}

小提琴

Answer 2

您可以使用Flexbox

 .container { width: 33%; background: grey; display: flex; } .box1 { background: red; flex: 0 0 45px; } input { flex: 1; height: 32px; } 

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

您也可以使用CSS表格执行此操作

 .container { width: 33%; background: grey; display: table; } .box1 { background: red; width: 45px; display: table-cell; } input { display: table-cell; width: 100%; height: 32px; } 

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

Answer 3

一种方法是使用calc()函数来设置input的width ，如下所示：

width:calc(100% - 32px);

您可以在caniuse.com上查看此功能的浏览器支持。