使用固定填充的動態大小的嵌套元素

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