在CSS中指定與父DIV相關的確切百分比寬度

我正在嘗試使用DIV元素和CSS來創建一個可視元素，它應該以下面演示的格式顯示數據。在CSS中指定與父DIV相關的確切百分比寬度

[----- 50％----- | --25％ - | --25％ - ]

當使用我下面指定的代碼和CSS，我最後元素總是溢出到下一行，我指定的CSS百分比值似乎並沒有正確創建佈局。

有人可以提出一個更好的方法來做到這一點？

我的HTML

<div class="visual-indicator-title"> 
All Items</div> 
<div class="visual-indicator-holder"> 
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;"> 
    25%</div> 
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;"> 
    25%</div> 
<div class="vi-internal-element" style="width: 50%;"> 
    50%</div> 
</div> 
<div class="visual-legend"> 
<ul class="inline-block"> 
    <li> 
     <div class="legend-blue"> 
     </div> 
     Sales</li> 
    <li><span class="legend-tan"></span>Processed</li> 
    <li><span class="legend-grey"></span>Pending Processing</li> 
</ul>

我的CSS

.visual-indicator-title{ 
font-size:12px; 
font-weight:bold; 
color:#777777; 
} 
.visual-indicator-holder 
{ 
width:100%; 
background-color:#666666; 
height:28px; 
border-radius: 8px; 
} 
.visual-indicator-holder .vi-internal-element 
{ 
font-size:11px; 
text-align:center; 
color:#ffffff; 
background-color:#777777; 
border-radius: 6px; 
display:inline-block; 
}

來源

2011-11-04 Nick