html - 在表格标题中以全宽输入 float div

Question

当应用边距时，输入宽度有问题。

我需要 100% 的输入宽度和边距。但是我需要在带有文本“名称”的 div 旁边输入这个 div。这就是我现在所拥有的。这一切都是为了过滤表头。谁能建议我一个解决方案？

.right{
    overflow:hidden;
    background:red;
    margin-right: 10px;
    box-sizing: border-box;
    float: right;
}
.left{
    background:green;
    box-sizing: border-box;
    padding-top: 10px;
    overflow:hidden;
    float: left;
}
.form-control{
    display: block;
    width: auto;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
}
.wrap{
  width: 235px;
}

<table>
<th class="wrap">

<div class="left">Name</div>
<div class="right"><input type="text" class="form-control" value=""></div>

</th>
</table>

JSFiddle here

Answer 1

给你的 .left 和 .right 类一些宽度。

.left{
    width:20%;
 }

.right{
    width:70%;
   }