css - 列表图像将内容下推

当我在<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);
}

最佳答案

使用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。

关于css - 列表图像将内容下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6365628/