Question

我有这个样本：

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

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

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

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

Answer 1

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

您可以使用box-sizing: border-box属性和100％width输入执行此操作。

*{
  box-sizing: border-box
}

Fiddle

修改

在澄清所需输出之后，这是一个calc()函数的解决方案：

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

Fiddle

Answer 2

您可以使用Flexbox

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以使用CSS表

执行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

执行此操作的一种方法是使用calc() function设置width的{{1}}，如下所示：

input

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

输入占用剩余空间？

3 个答案: