li с изображением помещаются над текстом

Текст должен быть рядом с изображением. У меня просто проблема, что текст ниже точки списка отображается, а не рядом с ним. В чем проблема? Я рассмотрел другие примеры, которые делают его совершенно одинаковым. Но в примерах это работает. li с изображением помещаются над текстом

.icon { 
 
    list-style-type: none; 
 
} 
 
      
 
.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
 
.icon li:nth-child(2):before {content: url(icon-2.png)' ';} 
 
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

<ul class="icon"> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
<li> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</li> 
 
</ul>

источник

2016-12-12 azrm

Возможный дубликат [Настройка положения изображения списка стилей?] (http://stackoverflow.com/questions/1708833/adjust-list-style-image-position) –

Вы можете использовать CSS Flexbox и сделать свой <h3> включает в себя весь текст с <span>, а затем сделать ваш <li> использование биоэтанола контейнера. Как:

<li> 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
</li>

Посмотрите ниже фрагмент коды:

.icon { 
 
    list-style-type: none; 
 
} 
 
      
 
.icon li:nth-child(1):before {content: url('http://placehold.it/50x50')' ';} 
 
.icon li:nth-child(2):before {content: url(http://placehold.it/50x50)' ';} 
 
.icon li:nth-child(3):before {content: url(http://placehold.it/50x50)' ';} 
 

 
li { 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 10px 0; 
 
} 
 

 
li:before { 
 
    height: 50px; 
 
} 
 

 
h3 { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding-left: 10px; 
 
} 
 

 
span { 
 
    display: block; 
 
    font-weight: normal; 
 
    font-size: small; 
 
}

<ul class="icon"> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
<li> 
 
    <h3>Lorem ipsum<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</span></h3> 
 
</li> 
 
</ul>

Надеется, что это помогает!

источник

2016-12-12 14:35:25

Спасибо большое, как раз то, что я смотрел f или – azrm

@alice Его мое удовольствие! –

Здесь icon li:nth-child(1):before ведет себя как элемент уровня блока, а <h3> - также элемент уровня блока. Поэтому измените свой css на:

.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
.icon li:before { display: inline-block } 
h3 {display: inline-block; }

источник

2016-12-12 14:38:12 rapidRoll

PFB рабочий фрагмент. Я просто добавил Div тег/б < лития > и </li > и применяются CSS для всех < Дивых > тегов, которые являются прямыми потомками < Ли >, чтобы иметь CSS свойство дисплей: встроенный блок

.icon { 
 
    list-style-type: none; 
 
} 
 
li>div 
 
{ 
 
display:inline-block; 
 
} 
 
.icon li:nth-child(1):before {content: url(icon-1.png)' ';} 
 
.icon li:nth-child(2):before {content: url(icon-2.png)' ';} 
 
.icon li:nth-child(3):before {content: url(icon-3.png)' ';}

<ul class="icon"> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
<li> 
 
<div> 
 
<h3>Lorem ipsum</h3> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</div></li> 
 
</ul>

источник

2016-12-12 14:52:19 Harinder

li с изображением помещаются над текстом

ответ

Смежные вопросы