Using sprites with inline list

Question

I try to use sprites in my list, but I can not set properly when I try to use with display: inline. Here is my jsfiddle

Markup

   <ul class="prod_specs">
           <li class="display">15"</li>
           <li class="hdd">1  TB</li>            
           <li class="ram">4 GB</li>
           <li class="battery">5 Std.</li>
           <li class="kg">2.3 kg</li>
   </ul>

CSS

.prod_specs{
    margin:0;    
    text-align: left;
    margin-bottom: 15px;
}

.prod_specs li{
    list-style-type: none;
    padding-top: 5px;  
    padding-left: 135px;
    line-height:1.5em;
    position: relative;  
    display: inline;
    width: 50px;
    margin-left: 0px;
    font-weight:bold;
    font-size:14px;
    color:blue
}

.prod_specs li:before{
    position: absolute;
    margin: -5px 0 0 -175px;
    min-height: 50px;  
    background: url(konfigurator/assets/img/konfigurator-sprites.png) no-repeat;
    width:50px;
    content:"";
    vertical-align: middle;
}

.prod_specs li.display:before {
    background-position: 0px 0px;
}
.prod_specs li.cpu:before {
    /*pulling it up so y will be negative*/
    background-position: 0px -35px;
}
.prod_specs li.gpu:before {
    background-position: -62px -64px;
}
.prod_specs li.hdd:before {
    background-position: 0 -240px;
}
.prod_specs li.ram:before {
    background-position: 0 -55px;
}
.prod_specs li.video:before {
    background-position: -155px -160px;
}

.prod_specs li.battery:before {
    background-position: 0px -300px;
}
.prod_specs li.kg:before {
    background-position: 0px -120px;
}

Answer 1

You had several errors in your css, most of them being:

:before absolute position, 
li padding left, 
:before margin, 
no inline-block on :before giving it no width

Check out:

http://jsfiddle.net/7c7Ub/

It should be easy to achieve what you want from there