Demo on jsfiddle

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

我将height课程的comboboxText更改为80%

和

width类的{p> comboboxTextDiv个非百分比值，例如auto

具有固定填充的动态大小的嵌套元素

2 个答案:

Demo on jsfiddle