3

Код:

<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: введите сюда описание изображения

Итог:

введите сюда описание изображения

Однако, к примеру, заяц и "Быстрый" должны быть в одной строке. Как?

0

4 ответа 4

2

.sprite {
	background:url(https://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>

2

*{
  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(https://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>

1

Новое, это хорошо забытое старое, используйте возможности "табличной" вёрстки:

.sprite {
  background-image: url("https://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>

0

Например добавить свойство display: inline-block;

Добавить класс к <ul class="myList">

И стиль:

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

inline-block означает что выбранный блок нужно выводить в одну линию.

Но это только выравнивание, далее нужно будет равнять внутренности

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.