Question

当我在<li>中使用图片时，内容会向下推。它假设与图像对齐。 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.dropbox.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);
}

Answer 1

使用background-image代替list-style-image。例如：

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

然后将左边距填充添加到列表项：

.services-info ul li {
    padding-left: 120px;
}

查看更新的bin。

Answer 2

您需要将背景图像用于列表项，并设置其填充以允许背景图像的空间。

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>

列表图像推送内容

2 个答案: