使用固定填充的动态大小的嵌套元素

Question

以下HTML为200px宽，30px高度的可编辑组合框生成一个相当干净的基础，该组合框可与角度绑定或其他JavaScript数据绑定一起使用。但是，我希望最外层的div是100％宽，而180px宽的div使用填充而不是明确的大小。但是，填充似乎总是被忽略。有谁知道这是为什么，如果有任何好的解决方法？ （最好是CSS/HTML）

<style> 
    .comboboxOuterDiv { 
     padding:0px; 
     margin:0px; 
     border:0px; 
     height:30px; 
     width:200px; 
     position:relative; 
    } 
    .comboboxSelectDiv { 
     height:100%; 
     width:100%; 
     position:absolute; 
     top:0px; 
     left:0px; 
     z-index:0; 
    } 
    .comboboxSelect { 
     height:100%; 
     width:100%; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 
    .comboboxTextDiv { 
     height:100%; 
     width:180px; 
     position:absolute; 
     top:0px; 
     left:0px; 
     z-index:1; 
    } 
    .comboboxText { 
     height:100%; 
     width:100%; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 
</style> 
<div class="comboboxOuterDiv"> 
    <div class="comboboxSelectDiv"> 
     <select class="comboboxSelect"> 
      <option value="a_value">A Value</option> 
     </select> 
    </div> 
    <div class="comboboxTextDiv"> 
     <input class="comboboxText" type="text"/> 
    </div> 
</div> 

Answer 1

这里有一个工作示例兴趣的人：

<style> 
    .comboboxOuterDiv { 
     padding:0px; 
     margin:0px; 
     border:0px; 
     height:30px; 
     width:100%; 
     position:relative; 
     overflow:hidden; 
    } 
    .comboboxSelectDiv { 
     height:100%; 
     width:100%; 
     position:relative; 
     top:0px; 
     left:0px; 
     z-index:0; 
    } 
    .comboboxSelect { 
     height:100%; 
     width:100%; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 
    .comboboxTextDiv { 
     display:block; 
     height:100%; 
     width:auto; 
     position:absolute; 
     top:0px; 
     left:0px; 
     right:20px; 
     z-index:1; 
    } 
    .comboboxText { 
     height:100%; 
     width:100%; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 
</style> 
<div class="comboboxOuterDiv"> 
    <div class="comboboxSelectDiv"> 
     <select class="comboboxSelect"> 
      <option value="a_value">A Value</option> 
     </select> 
    </div> 
    <div class="comboboxTextDiv"> 
     <input class="comboboxText" type="text"/> 
    </div> 
</div> 

Answer 2

我改变你的代码！

可能它是你的目标！检查它并告诉我这个！

Demo on jsfiddle

我改变heightcomboboxText类来80%

和

comboboxTextDiv类的width到非百分比值，如auto