putting text and images on same line within a list item - html/css
Solution 1
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
Solution 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.
Pectus Excavatum
Updated on May 14, 2020Comments
-
Pectus Excavatum almost 4 years
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; }