list images pushes content down
When I use images in <li>
, the content pushes down. It's suppose to be aligned with the images. http://jsbin.com/epayo5
.services-info ul li {
background: #fff;
margin: 39px 0;
width: 266px;
padding: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.services-info ul li:nth-of-type(1) {
list-style-image: url(http://dl.dropb开发者_开发百科ox.com/u/31659128/fb-icon.png);
}
.services-info ul li:nth-of-type(2) {
list-style-image: url(http://dl.dropbox.com/u/31659128/twitter-icon.png);
}
.services-info ul li:nth-of-type(3) {
list-style-image: url(http://dl.dropbox.com/u/31659128/yt-icon.png);
}
Use background-image
instead of list-style-image
. For example:
.services-info ul li:nth-of-type(1) {
list-style-type: none;
background-image: url(http://dl.dropbox.com/u/31659128/fb-icon.png);
background-repeat: no-repeat;
}
Then add left padding to the list item:
.services-info ul li {
padding-left: 120px;
}
See updated bin.
You'll want to use the background-image for your list items, and set their padding to allow space for the background image.
Here is a jsfiddle showing how to do it.
CSS:
#social_network li {
height: 95px;
padding-left: 100px;
background-position: top left;
background-repeat: no-repeat;
}
li.fb {
background-image: url('http://dl.dropbox.com/u/31659128/fb-icon.png');
}
li.twitter {
background-image: url('http://dl.dropbox.com/u/31659128/twitter-icon.png');
}
li.yt {
background-image: url('http://dl.dropbox.com/u/31659128/yt-icon.png');
}
HTML:
<ul id="social_network">
<li class="fb">
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
</li>
<li class="twitter">
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
</li>
<li class="yt">
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
</li>
</ul>
精彩评论