不同背景大小的ul列表项目

Question

我正在尝试为我的网站制作页脚。它应该包含5行联系信息，黑色背景上的白色文字和之间的空白区域。所以基本上它会看起来像是5个黑色条纹，上面有白色文字。

问题是，当我希望它们大致为文本的长度时，所有黑色条带的长度相同。我尝试漂浮列表项目而不是<ul>，并在每个项目后放置换行符。背景现在大小合适，但我无法在它们之间添加空白区域而不会搞乱它们。

HTML：

<ul> 
       <li>Company name</li> 
       <li>Adressadress 123444</li> 
       <li>023311 postal code</li> 
       <li>+358 12385495955</li> 
       <li>info@company.com</li> 
</ul> 

CSS：

ul {float:left; 
li { 
    list-style:none; 
    background-color:black; 
    color:white; 
    text-transform:uppercase; 
    font-weight:bold; 
    margin-bottom:5px; 
    padding-left:5px; 
    padding-right:5px; 
    } 
    } 

任何想法？

Answer 1

在文本周围添加span标签可以解决您的问题。

<ul> 
    <li><span>one</span></li> 
    <li><span>two</span></li> 
    <li><span>three</span></li> 
    <li><span>four</span></li> 
    <li><span>five</span></li> 
</ul>​ 


ul { 
    margin:10px; 
} 

ul li { 
    margin-bottom:15px; 
} 

ul li span { 
    background:black; 
    padding:5px; 
    color:white; 
} 
​ 

http://jsfiddle.net/uwPcv/