包含div不会完全展开以包含百分比的子项

Question

我有一个扩展为适合其子div的div但是当我给孩子填充或以百分比指定的边距时，父母似乎没有考虑到那个空间。但是，如果我使用像素指定填充或边距，它工作正常，这似乎很奇怪。我一直在寻找解决方案，但无济于事。我在Firefox和Chrome中都试过这个，这是我唯一需要支持的浏览器 http://jsfiddle.net/YTsmz/5/

带像素：

百分比：

html：

<div class="field">
    <div class="name">countries</div>
    <div class="value">united states</div>
    <div class="value">united kingdom</div>
    <div class="value">dominican republic</div>
</div>

css：

.field {
    position: relative;
    float: left;
    border-right: 1px dotted #3d3d3d;
    line-height: 1em;
    white-space: nowrap;
    padding: 0 1% 0 1%;
    font-weight:bold;
}
.field .name {
    font-size:1em;
    line-height:1.5em;
}
.field .value {
    display: inline-block;
    margin: 0% 1% 0% 0%;
    border-right: 1px dotted #3d3d3d;
    padding: 0 1% 0 1%;
    font-size:1.3em;
    line-height:1.3em;
}
.field .value:last-of-type {
    border-right: none;
}