putting text and images on same line within a list item - html/css

Question

I was wondering if anyone could help me out with a small html/css issue I am having. Basically, I am trying to make a unordered list with a different image for the bullet of each list item, with a text to the right on the same line. More specifically, a header on the top line and some normal text below. At the moment, I can get the image and the text on the same line :-( Here is my code.

Any help would be greatly appreciated.

Html:

<ul>
    <li class="service-list">
        <a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
        <h3>Header</h3>
        <p>
        text goes here
        </P>
    </li>
....
</ul>

CSS:

.service-list {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    float: left;
    display: inline-block;
}


.service-list p {
    text-align: right; 
    margin: 0; 
    padding: 0;
}

Answer 1

.items-list {
box-shadow: -2px 1px 14px #e5e6e8;
list-style-type: none;
margin-left:0px;
padding-left:0px;
margin-bottom:15px;
width:100%;
}


@media only screen and (max-width:400px)  {
.items-list {
height:110px;
}
.items-list .kmtext {
  padding-bottom:6px;
}
.items-list img
{
float:left;
 width:40%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 5px;
}
}
@media only screen and (min-width:401px) and (max-width:500px)  {
.items-list {
height:200px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 15px;
}
}

@media only screen and (min-width:501px) and (max-width:700px)   {
.items-list {
height:250px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 40px;
}
}
@media only screen and (min-width:701px) and (max-width:1399px)  {
.items-list {
height:300px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 50px;
}
}
@media only screen and (min-width:1400px) {
.items-list {
height:330px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 60px;
}
}
.items-list img
{
 object-fit: cover;
border-right: 5px solid;
border-image:   linear-gradient(to bottom, #86DF7B 50%,#7BAADF 50%) 2;
}

.items-list .kmtext {
  color:#26b7a1;
  font-size:80%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .pricetext {
  color:#020202;
  font-weight:bold;
  padding-bottom:6px;
  font-size:120%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .titletext {
  color:#919396;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

<ul>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
</ul>

This is okay using both media query, you can re-scale it to your likeness

Answer 2

I discourage the "tabluar aproach". Tables are for tables. Use <div> instead.

I simply turn the <a> in a block element and wrap the content in a <div> and float both left.

HTML:

<ul id="services-list">
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-24.png" alt="Facebook Icon" />
  </a>
  <div class="content">
    <h3>Header</h3>
    <p>text goes here</p>
  </div>
</li>
<li>
  <a href="http://www.google.com" class="image">
    <img src="http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/24/facebook.png" alt="Facebook Icon" />
  </a>
  <div class="content">
  <h3>Header</h3>
  <p>text goes here</p>
  </div>
</li>
</ul>

CSS:

/*a little bit of reset*/
#services-list, #services-list p, #services-list h3 {
list-style: none;
margin:0; padding:0;
}

#services-list > li{
  float:left;
  margin-right: 20px;
  width: 130px;
}

#services-list > li > .image{
  display:block;
  float:left;
  margin-right:10px;
}

/*
this instructions are to force the dimensions of image and its container <a>
*/
#services-list > li > .image,
#services-list > li > .image > img{
  width:24px; height:24px;
}

Here's the editable code: http://codepen.io/andreacanton/pen/lykDA

Note: the height of the <ul> will not be proper calculated by the browser because contain floated elements. So you should add some clear:both <div> or force the height of the <ul> element.

Answer 3

While using

display:inline-block;

don't use

float:left;

Try

.service-list {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}

.service-list img
{
float:left;
}

.service-list p,.service-list h3 {
text-align: right; 
display:inline-block;
padding: 0;
}

Here is the Link to Fiddle