输入浮动div，表头中有全宽

Question

当应用来自边的填充时，输入宽度有问题。

我需要输入宽度100％和侧面填充。但是我需要使用文本“Name”在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%;
   }