Code:

<ul> <li class="clearfix"><i class="sprite sprite-ico1"></i><span>Быстрый</span></li> <li class="clearfix"><i class="sprite sprite-ico2"></i><span>Огромное количество задач</span></li> <li class="clearfix"><i class="sprite sprite-ico3"></i><span>Оптимизированный</span></li> <li class="clearfix"><i class="sprite sprite-ico4"></i><span>Множество возможностей</span></li> <li class="clearfix"><i class="sprite sprite-ico5"></i><span>Автоматические обновления</span></li> </ul>

-

 .sprite { background-image: url(upload/sprite.png); background-repeat: no-repeat; display: block; // если Inline или inline-block, то пропадают изображения margin-bottom:15px; // не влияет на выравнивание } .sprite-easy { width: 34px; height: 32px; background-position: -5px -5px } .sprite-ico1, .sprite-ico2, .sprite-ico3, .sprite-ico4, .sprite-ico5 { width: 32px; height: 32px } .sprite-ico1 { background-position: -49px -5px } .sprite-ico2 { background-position: -91px -5px } .sprite-ico3 { background-position: -133px -5px } .sprite-ico4 { background-position: -175px -5px } .sprite-ico5 { background-position: -217px -5px } .sprite-pin { width: 36px; height: 32px; background-position: -259px -5px } .sprite-saturn { width: 32px; height: 32px; background-position: -305px -5px } .sprite-settings { width: 33px; height: 32px; background-position: -347px -5px }

sprite.png: enter image description here

Total:

enter image description here

However, for example, the hare and "Quick" should be on the same line. How?

    4 answers 4

     .sprite { background:url(http://i.stack.imgur.com/3CVq2.png) no-repeat 0 0; display: block; } .clearfix {clear:left; list-style-type:none; margin-bottom:10px;} .clearfix i.sprite {float:left;} .clearfix span {display:block; margin-left:42px; font-size:22px; line-height:32px; font-family:Arial;} .sprite-ico1, .sprite-ico2, .sprite-ico3, .sprite-ico4, .sprite-ico5 { width: 32px; height: 32px } .sprite-ico1 {background-position: -49px -5px} .sprite-ico2 {background-position: -91px -5px} .sprite-ico3 {background-position: -133px -5px} .sprite-ico4 {background-position: -175px -5px} .sprite-ico5 {background-position: -217px -5px} 
     <ul> <li class="clearfix"><i class="sprite sprite-ico1"></i><span>Быстрый</span></li> <li class="clearfix"><i class="sprite sprite-ico2"></i><span>Огромное количество задач</span></li> <li class="clearfix"><i class="sprite sprite-ico3"></i><span>Оптимизированный</span></li> <li class="clearfix"><i class="sprite sprite-ico4"></i><span>Множество возможностей</span></li> <li class="clearfix"><i class="sprite sprite-ico5"></i><span>Автоматические обновления</span></li> </ul> 

       *{ padding: 0; margin: 0; box-sizing: border-box; } ul {} ul > li { position: relative; padding-left: 40px; position: relative; margin:25px 0; } ul > li:before { content: ''; position: absolute; top: 50%; left: 0; background-image: url(http://i.stack.imgur.com/3CVq2.png); background-repeat: no-repeat; width: 32px; height: 32px; margin-top: -16px; } ul > li:first-child:before {background-position: -49px -5px;} ul > li:nth-child(2):before {background-position: -91px -5px;} ul > li:nth-child(3):before {background-position: -133px -5px;} ul > li:nth-child(4):before {background-position: -175px -5px;} ul > li:nth-child(5):before {background-position: -217px -5px;} 
       <ul> <li>Быстрый</li> <li>Огромное количество задач</li> <li>Оптимизированный</li> <li>Множество возможностей</li> <li>Автоматические обновления</li> </ul>

        New, this is a well-forgotten old, use the capabilities of the "tabular" layout:

         .sprite { background-image: url("http://i.stack.imgur.com/3CVq2.png"); background-repeat: no-repeat; } ul { display: table; border-collapse: collapse; } li { display: table-row; } i, span { display: table-cell; vertical-align: middle; } span { padding-left: 5px; } i { padding-top: 5px; width: 32px; height: 32px; } .sprite-ico1 { background-position: -49px -5px } .sprite-ico2 { background-position: -91px -5px } .sprite-ico3 { background-position: -133px -5px } .sprite-ico4 { background-position: -175px -5px } .sprite-ico5 { background-position: -217px -5px } 
         <ul> <li class="clearfix"><i class="sprite sprite-ico1"></i><span>Быстрый</span> </li> <li class="clearfix"><i class="sprite sprite-ico2"></i><span>Огромное количество задач</span> </li> <li class="clearfix"><i class="sprite sprite-ico3"></i><span>Оптимизированный</span> </li> <li class="clearfix"><i class="sprite sprite-ico4"></i><span>Множество возможностей</span> </li> <li class="clearfix"><i class="sprite sprite-ico5"></i><span>Автоматические обновления</span> </li> </ul>

          For example, add the display: inline-block; property display: inline-block;

          Add a class to <ul class="myList">

          And style:

           .myList > li * { display: inline-block; }

          inline-block means that the selected block should be displayed in one line.

          But this is only the alignment, then you will need to equate the insides