HTML-如何在当前元素的宽度百分比中包括父元素的填充/边距？

Question

我正在呈现组织的层次结构，该结构具有两列：“名称”和“人员”。因为每个层次结构元素都可以属于不同的层次结构级别，所以我使用margin-left css属性进行区分。但是，当我将Name div的宽度设置为80％，将People div的宽度设置为20％时，每个级别的宽度似乎都不同，因为它们不包括父元素的margin属性：

目前，我的HTML结构如下所示：

所应用的CSS样式如下：

.item-name, .item-count {
    word-break: break-all;
    line-height:22pt;
    font-size:10pt;
    border: solid 1px grey;
    padding: 4px;
    display: inline-block;
}
.item-name {
    width:80%;
}
.item-count {
    text-align:center;
    width:20%;
}

无论宽度值是多少，我该如何使width：80％和width：20％包括父div的边距宽度？

Answer 1

我知道这不是最好的解决方案，但是以下技巧对我有用（250px〜20％）：

.item-count {
    text-align:center;
    width:250px;
}

然后每个具有item-name类的div都包含内联样式，该样式具有基于父级的宽度和边距计算的width属性：

<div class="item-row" style="margin-left:25px;">
    <div class="item-name id-2_2031" style="width:calc(80% + (25px * 0.8) - 25px)">
    </div>
    <div class="item-count">
    </div>
</div>

...

<div class="item-row" style="margin-left:50px;">
    <div class="item-name id-2_2031" style="width:calc(80% + (50px * 0.8) - 50px)">
    </div>
    <div class="item-count">
    </div>
</div>