Перенос блока на новую строку

#html #css

Код:


    
Быстрый
    
Огромное количество
задач
    
Оптимизированный
    
Множество возможностей
    
Автоматические обновления



-

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


Итог:



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

Ответы

Ответ 1

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

    
Быстрый
    
Огромное количество
задач
    
Оптимизированный
    
Множество возможностей
    
Автоматические обновления



Ответ 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(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;}

    
Быстрый
    
Огромное количество задач
    
Оптимизированный
    
Множество возможностей
    
Автоматические обновления



Ответ 3

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



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

  
Быстрый
  
  
Огромное количество
задач
  
  
Оптимизированный
  
  
Множество возможностей
  
  
Автоматические обновления
  



Ответ 4

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

Добавить класс к 


И стиль:

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


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

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