html - ul 列出具有不同背景大小的元素

Question

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

问题是当我希望它们大致与文本长度相同时，所有黑色 strip 的长度都相同。我尝试 float 列表项而不是 <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/