在CSS中指定与父DIV相关的精确百分比宽度

Question

我正在尝试使用DIV元素和CSS创建一个可视元素,它应该以下面演示的格式显示数据.

[----- 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;
}

Answer 1

发生这种情况的原因是,使用inline或inline-block,元素中的空白区域将影响渲染(添加空间).这是你的演示,删除了空格,没有对CSS的更改:http://jsfiddle.net/fZXnU/

尽管如此,删除空格并不是一件容易的事,所以你最好浮动元素(触发器display:block).有大量空白区域的工作演示:http://jsfiddle.net/fZXnU/1/

Answer 2

您可以使用float: left,, position: relative然后按百分比定义宽度.

我在这里修改你的代码使用float:http://jsfiddle.net/Z3kdP/.