以下是我的代码:
<html>
<head>
<style>
.list {
list-style-type: none;
background-color:purple;
}
.list li {
float: left;
margin: 5px;
}
.link{
font-color:white;
}
</style>
</head>
<body>
<ul class="list">
<li><a href="##" class="link">BANK INDIA</a></li>
<li><a href="##" class="link">APPLY FOR CREDIT CARDS</a></li>
<li><a href="##" class="link">ABOUT US</a></li>
<li><a href="##" class="link">CONTACT US</a></li>
</ul>
</body>
</html>
我正在尝试为整个列表添加背景颜色。某些方式它没有出现。我无法弄清楚原因。请帮助
答案 0 :(得分:3)
由于您有float: left
,因此需要清除它们。添加:
.list {
list-style-type: none;
background-color: purple;
overflow: hidden;
}
工作代码段
<!DOCTYPE html>
<html>
<head>
<style>
.list {
list-style-type: none;
background-color: purple;
overflow: hidden;
}
.list li {
float: left;
margin: 5px;
}
.link{
color:white;
}
</style>
</head>
<body>
<ul class="list">
<li><a href="##" class="link">BANK INDIA</a></li>
<li><a href="##" class="link">APPLY FOR CREDIT CARDS</a></li>
<li><a href="##" class="link">ABOUT US</a></li>
<li><a href="##" class="link">CONTACT US</a></li>
</ul>
</body>
</html>
&#13;
答案 1 :(得分:1)
请尝试以下操作: Demo
.list {
list-style-type: none;
}
.list li {
float: left;
margin: 5px;
background-color:purple;
}
.link {
color:red;
}
不要将背景颜色添加到.list
,而是使用li
。在.link中,您需要使用color:white
而不是font-color
答案 2 :(得分:0)
哟必须在添加颜色的地方添加溢出隐藏。它为我工作:
<style>
.list {
list-style-type: none;
background-color:purple;
overflow: hidden;
}
.list li {
float: left;
margin: 5px;
}
.link{
font-color:white;
}
</style>
答案 3 :(得分:-1)
请尝试这个:
请添加css
.list li {
float: left;
margin: 5px;
background-color:gray;
}