列表圖像將內容壓低

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

來源

2011-06-15 nowayyy

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

來源

2011-06-15 23:41:33 melhosseiny

我不能改變背景顏色，但。 – nowayyy 2011-06-16 00:00:15

當然可以。只需添加一個顏色標記，如'background：blue url（...）no-repeat;'或添加一個'background-color：blue;'聲明。 – melhosseiny 2011-06-16 00:02:50

在代碼中，我有背景：#fff;在ul裏。我正在黑暗的背景下工作。當我在li上使用背景時，它不起作用。 – nowayyy 2011-06-16 00:39:49

您需要爲列表項目使用背景圖像，並設置其填充以允許背景圖像的空間。

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>

來源

2011-06-15 23:51:19 Dave

列表圖像將內容壓低

回答

相關問題