li with image are placed above the text

Question

The text should be next to the image. I just have the problem that the text below the list point is displayed, not right next to it. What is the problem here? I've looked at other examples that make it exactly the same. But in the examples it works however.

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

Possible duplicate of [Adjust list style image position?](http://stackoverflow.com/questions/1708833/adjust-list-style-image-position) — Carlos Martins, Dec 12 '16 at 14:36

score 1 · Accepted Answer · answered Dec 12 '16 at 14:35

You can use CSS Flexbox and make your <h3> includes all the text with a <span>, then make your <li> a flex container. Like:

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

Have a look at the snippet below:

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

Hope this helps!

Thanks a lot, Just what I was looking for – azrm Dec 12 '16 at 15:57 — azrm, Dec 12 '16 at 15:57
@alice Its my pleasure! – Saurav Rastogi Dec 12 '16 at 15:58 — Saurav Rastogi, Dec 12 '16 at 15:58

rapidRoll · Answer 2 · 2016-12-12T14:44:35.743

1

Here icon li:nth-child(1):before is behaving like block level element and <h3> both is also a block level element. So change your css to:

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

edited Dec 12 '16 at 14:44

answered Dec 12 '16 at 14:38

rapidRoll

182
9

Harinder · Answer 3 · 2016-12-12T15:05:33.197

PFB the working snippet. I just added a div tag b/w <li> and </li> and applied CSS for all the <div> tags which are direct children of <li> to have CSS property display:inline-block

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

li with image are placed above the text

3 Answers3