具有固定填充的动态大小的嵌套元素 下面的HTML为一个200 px宽、30px高可编辑的组合框做了一个非常干净的基础，它可以与角绑定或其他JavaScript数据绑定一起使用。但是，我希望最外层的div为100%宽，180px宽的div使用填充而不是显式大小。然而，填充似乎总是被忽略。有人知道这是为什么吗？有没有什么好的解决办法？（最好是CSS/HTML） .comboboxOuterDiv{ 填充：0px； 边际：0px； 边界：0px； 高度：30px； 宽度：200px； 位置：相对位置； } .comboboxSelectDiv{ 身高：100%； 宽度：100%； 位置：绝对位置； 顶部：0px； 左：0px； z指数：0； } .comboboxSelect{ 身高：100%； 宽度：100%； 位置：绝对位置； 顶部：0px； 左：0px； } .comboboxTextDiv{ 身高：100%； 宽度：180px； 位置：绝对位置； 顶部：0px； 左：0px； z指数：1； } .comboboxText{ 身高：100%； 宽度：100%； 位置：绝对位置； 顶部：0px； 左：0px； } 价值

以下是一个适合感兴趣的人的工作示例：

<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>

.comboboxOuterDiv{
填充：0px；
边际：0px；
边界：0px；
高度：30px；
宽度：100%；
位置：相对位置；
溢出：隐藏；
}
.comboboxSelectDiv{
身高：100%；
宽度：100%；
位置：相对位置；
顶部：0px；
左：0px；
z指数：0；
}
.comboboxSelect{
身高：100%；
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}
.comboboxTextDiv{
显示：块；
身高：100%；
宽度：自动；
位置：绝对位置；
顶部：0px；
左：0px；
右：20px；
z指数：1；
}
.comboboxText{
身高：100%；
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}
价值

我更改了你的代码

也许这是你的目标！！检查一下，告诉我

我将

comboboxText

类的

height

更改为

80%

及

---

width

将

comboboxTextDiv

类设置为非百分比值，例如

auto

最好使用单独的css代码。。。你所有的样式都内嵌在html标签中，我真的很困惑…现在发布了一个更干净的版本。请删除此答案。。。我们可以看到您对主要问题的编辑。此答案与编辑不同。这个答案有效。编辑没有。我正在寻找comboOuterDiv动态更改大小，而不更改右侧的箭头部分。但是非常感谢你的帮助@阿隆夫：D。。。这是因为

comboboxTextDiv

class！我看到了你的答案，它是完整的，所以！你不需要回答我的问题；）一切都很好。谢谢你抽出时间来帮我！

<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>