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

您可以在每个span元素中添加li元素，然后将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

列表样式图像未垂直对齐

1 个答案: