javascript - CSS水平条形图 - 管理宽度

Question

我有一个网站，它显示具有不同左右百分比的各种水平条形图。

这是我的意思的屏幕截图：

一切都很好，直到我遇到不成比例的条形宽度：

所以在这里寻求一点建议。在这种情况下，您建议如何处理宽度，以便在两个条形之间保持一定程度的相对比例时，可以完全显示非常低的百分比（例如 1%）？我试过用像素宽度填充，添加/减去缓冲区宽度%，但还没有让我满意。

这是我当前的 HTML/CSS：

HTML：

<div class="graph-outer">
    <div class="inner-left-cap"></div>
    <div class="inner-left-bar">1%</div>
    <div class="inner-right-bar">99%</div>
    <div class="inner-right-cap"></div>
</div>

​ CSS：

.graph-outer {
    background: black;
    height: 20px;
    width: 150px;   
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
}

.inner-left-cap {
    background: orange;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 1%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 98%;
    height: 100%;
    text-align: center;
    float: left;
}

​<a href="http://jsfiddle.net/2ZkDz/126/" rel="nofollow noreferrer">http://jsfiddle.net/2ZkDz/126/