Html ul列出不同背景尺寸的项目

我正在尝试为我的网站制作页脚。它应该包含5行联系信息，黑色背景上的白色文本和中间的空白。因此，从本质上看，它将看起来像5条黑色的条纹，彼此重叠，上面有白色的文字

问题是，当我希望它们大致与文本长度相同时，所有的黑色条带的长度都是相同的。我尝试浮动列表项，而不是

，并在每个项目后面加上换行符。背景现在大小合适了，但我无法在它们之间添加空白而不把它弄乱

HTML:

---

有什么想法吗？

在文本周围添加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;
}
​

一个
两个
三
四
五
​
保险商实验室{
利润率：10px；
}
ulli{
边缘底部：15px；
}
李斯潘{
背景：黑色；
填充物：5px；
颜色：白色；
}
​

---

你能发布你的css和html吗？你能发布你的代码吗

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

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