图像右侧列表中的 CSS 文本被压缩为只有一个字符宽

Question

您好，提前致谢

我是新手，如果我无法解释，一开始就很抱歉。我有一个网页和一个 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

是因为你给了你li的宽度，我弄了一个fiddle here而不是给你的 li 宽度，你必须调整背景图像的大小

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