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/

ul列出具有不同背景大小的项目

1 个答案: