0

我正在尝试为我的网站制作页脚。它应该包含 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;
    }
    }

有任何想法吗？

4

1 回答 1

0

在文本周围添加跨度标签应该可以解决您的问题。

<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/

于 2013-01-04T10:54:05.340 回答