右对齐列表项中的背景颜色

Question

我试图设置一个条形图，从右到左绘制条形图。在图表的右侧，我有一个垂直规则，条形应该触及。但是现在条形图是左对齐的，我无法弄清楚如何解决这个问题。

http://jsfiddle.net/7f58a/3/

HTML

<div class="box">
    <ul class="float-right alignRight">
        <li>Value 1</li>
        <li>Value 2</li>
        <li>Value 3</li>
        <li>Value 4</li>
        <li>Value 5</li>
        <li>Value 6</li>
    </ul>
    <div class="vr float-right"></div>
    <ul class="float-right alignRight">
        <li class="bar rounded-left" style="width: 5px"></li>
        <li class="bar rounded-left" style="width: 5px"></li>
        <li class="bar rounded-left" style="width: 5px"></li>
        <li class="bar rounded-left" style="width: 20px">+1</li>
        <li class="bar rounded-left" style="width: 5px"></li>
        <li class="bar rounded-left" style="width: 5px"></li>
    </ul>
</div>

CSS

* {
    list-style: none;
}
.rounded, .rounded-right {
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}
.rounded, .rounded-left {
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.vr {
    width: 1px;
    background-color: #cea4d8;
    height: 185px;
    margin-top: 15px;
}
.bar {
    background-color: #cea4d8;
    height: 25px;
}
.box {
    width: 330px;
}
.box li{
    height: 25px;
    margin-top: 5px;
}
.alignRight {
    text-align: right;
}
.float-right {
    float: right;
}

谢谢！

Answer 1

bar类中的

向右添加浮动并清除两者：

.bar {
    background-color: #cea4d8;
    height: 25px;
    float: right;
    clear: both;
}

并且会奏效。