列表樣式圖像不是垂直對齊的

Question

我使用了圖像列表樣式並嘗試將其與垂直文本完美對齊。

的jsfiddle：http://jsfiddle.net/uwzW5/

但似乎文本始終是下降的2px-3px的。我該如何解決這個問題？

<div class="col-md-3 feature-ul-section"> 
    <ul> 
    <h3>TRACK</h3> 
    <li> Detailed event tracking: 
     <ul class="sub-feature features-close"> 
     <li> Timestamp</li> 
     <li> IP</li> 
     <li> Country</li> 
     </ul> 
    </li> 
    <li> Conversions Tracking 
     <ul class="sub-feature features-close"> 
     <li> <a >Double tier conversion</a></li> 
     <li> <a>Configurable cookies</a></li> 
     <li> Track multiple conversions</li> 
     <li> Track product ID</li> 
     <li> Track custom parameters</li> 
     <li> Track conversion value</li> 
     <li> Track commission amount</li> 
     <li> http/https</li> 
     </ul> 
    </li> 
    <li> <a>Google Analytics UMT</a></li> 
    </ul> 
</div> 

和CSS

.feature-ul-section ul li { 
    list-style-image: url(../img/green-list.png); 
    font-family:'Source sans pro'; 
} 

.feature-ul-section ul li ul li { 
    list-style-image: url(../img/grey-list.png); 
} 

Answer 1

您可以將每個li元素中添加span元素，然後添加CSS樣式到span元素

嘗試

HTML：

<div class="col-md-3 feature-ul-section"> 
       <ul> 
        <h3>TRACK</h3> 
        <li> <span>Detailed event tracking:</span> 
           <ul class="sub-feature features-close"> 
            <li> <span>Timestamp</span></li> 
            <li> <span>IP</span></li> 
            <li> <span>Country</span></li> 
           </ul> 
          </li> 


       </div> 

CSS：

span{ 
    position:relative; 
    top:-3px; 
} 

DEMO