开发者

list images pushes content down

开发者 https://www.devze.com 2023-03-13 12:26 出处:网络
When I use images in <li>, the content pushes down. It\'s suppose to be aligned with the images. http://jsbin.com/epayo5

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

精彩评论

暂无评论...
验证码 换一张
取 消