CODEWITHSUNDEEP
htmlcss
user1012181
user1012181

Reputation: 8726

list style image not aligned vertically

I used image list style and trying to align it perfectly well with the text in vertical.

JSFiddle: http://jsfiddle.net/uwzW5/

But it seems the text is always down by 2px-3px. How can I fix this issue?

<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>

and 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);
}

Upvotes: 0

Views: 78

Answers (1)

laaposto
laaposto

Reputation: 12213

You can add a span element inside each li element and then add CSS style to the span element

Try

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

Upvotes: 1

Related Questions