CSS：向左浮动并且位置绝对

Question

我用CSS创建了这个条形图

.barGraph {
    background: url(images/horizontal_grid_line_50_pixel.png) bottom left;
    border-bottom: 3px solid #333;
    height: 500px;
    margin: 1em 0;
    padding: 0;
    position: relative;
    }

.barGraph li {
    background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right;
    border: 1px solid #555;
    border-bottom: none;
    bottom: 0; 
    color: #FFF;
    margin: 0; 
    float: left; 
    padding: 0 0 0 0;
    list-style: none;
    text-align: center;
    width: 39px;
    }

当我添加

.barGraph li {
    position: absolute;
    }

条形图不再浮动，结果如下： 有没有办法让它像这样？

HTML：

<ul class="barGraph">               
    <li class="set1" style="height: 57px;">57</li>
    <li class="set1" style="height: 154px;">154</li> 
    <li class="set1" style="height: 99px;">99</li>
    <li class="set1" style="height: 57px;">57</li>
</ul>  

Answer 1

浮动：左侧和位置：绝对在一起没有意义。而是将列表项设置为display:inline-block;和vertical-align:bottom;

<强> jsFiddle example