CSS文本擠壓到只有一個字符寬

Question

Hi和感謝提前，

我是新來這個很抱歉當初如果我有麻煩解釋。我有一個網頁和一張CSS表格。該頁面有三個圖像，一個位於頁面內容部分的左側，另一個位於頁面的左側，我有一個列表，用於保存應顯示在每個圖像右側的文本，但文本被壓扁至只有一個字符寬度並向下流動並與下面的列表項重疊，而不是與相應的圖像內嵌在單行中。

下面是HTML & CSS：

<div style="clear:both"></div> 
<div id="content"> 
    <div id="subscribe"> 
     <h3>Subscribe!</h3><br></br> 
     <ul> 
      <li id="phone"><a href="#">Call me via Phone</a></li> 
      <li id="email"><a href="#">Get Email Updates</a></li> 
      <li id="twitter"><a href="#">Follow us on Twitter</a></li> 
      <div style="clear:both"></div> 
     </ul> 
    </div> 
</div> 

#content { 
    width: 300px; 
    float: left; 
    padding-top: 20px; 
} 

#subscribe { 
    width: 300px; 
    padding-top: 20px; 
} 

#subscribe h3 { 
    font-size: 20px; 
} 

ul#subscribe li { 
    list-style: none; 
    display:inline-block; 
    width: 300px; 
    padding-bottom: 5px; 
    padding-left: 35px; 
    margin:0 0 10px 0; 
} 

ul#subscribe li a { 
    list-style: none; 
    font-size: 18px; 
    padding-left: 40px; 
} 

li#phone { 
    list-style: none; 
    background: url(images/phone.png) no-repeat; 
    width: 36px; 
    height: 36px; 
    padding-left: 40px; 
    margin:0 0 20px 0; 
} 

li#email { 
    list-style: none; 
    background: url(images/email.png) no-repeat; 
    width: 36px; 
    height: 36px; 
    padding-left: 40px; 
    margin:0 0 20px 0; 
} 

li#twitter { 
    list-style: none; 
    background: url(images/twitter.png) no-repeat; 
    width: 36px; 
    height: 36px; 
    padding-left: 40px; 
    margin:0 0 20px 0; 
} 

Answer 1

這是因爲你給了一個寬貴麗，我做了一個小提琴here 而不是給一個寬貴麗，你必須調整背景圖片

li#phone { 
list-style: none; 
background: url(http://fakeimg.pl/300/) no-repeat; 
background-size: 36px 36px; 
padding-left: 40px; 
margin:0 0 20px 0; 
}