右對齊列表項中的背景顏色

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 { 
    background-color: #cea4d8; 
    height: 25px; 
    float: right; 
    clear: both; 
} 

，並將努力。