css - 将 Sprite 与内联列表一起使用

Question

我尝试在我的列表中使用 Sprite ，但是当我尝试使用 display: inline 时我无法正确设置。这是我的 jsfiddle

标记

   <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

你的 css 有几个错误，其中大部分是:

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

checkout :

http://jsfiddle.net/7c7Ub/

从那里应该很容易实现你想要的