Home/ Questions/Q 6031929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T05:15:29+00:00

When I use images in <li> , the content pushes down. It’s suppose to

  • 0

When I use images in <li>, the content pushes down. It’s suppose to be aligned with the images. http://jsbin.com/epayo5

 .services-info ul li {
    background: #fff;
    margin: 39px 0;
    width: 266px;
    padding: 15px;
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.services-info ul li:nth-of-type(1) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/fb-icon.png);
}

.services-info ul li:nth-of-type(2) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/twitter-icon.png);
}

.services-info ul li:nth-of-type(3) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/yt-icon.png);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use background-image instead of list-style-image. For example:

    .services-info ul li:nth-of-type(1) {
    list-style-type: none;
    background-image: url(http://dl.dropbox.com/u/31659128/fb-icon.png);
    background-repeat: no-repeat;
}

    Then add left padding to the list item:

    .services-info ul li {
    padding-left: 120px;
}

    See updated bin.

    • 0