我有以下用于快速链接容器的 CSS3 代码。我不知道为什么,但渐变背景不在文本下方。
如果我从 div.quicklinks
中删除 float: left
,我将显示渐变背景,但我想在左侧显示一些文本。
谢谢
div.quickLinksContainer {
clear:both;
border-top: 1px solid #999999;
text-align:center;
margin: auto;
width: 100%;
padding: 10px;
background-image: linear-gradient(bottom, rgb(179,175,176) 49%, rgb(237,237,237) 75%);
}
div.quickLinks {
font-size: 12px;
float:left;
}
.quickLinks h2 {
color:#666666;
font-size:14px;
font-weight:bold;
margin-bottom:10px;
}
.quickLinks li a {
color:#555555;
text-decoration:initial;
}
最佳答案
背景不在内容后面的原因是
div.quickLinks {
float:left;
}
如果您更愿意将背景渐变直接放在 div.quickLinks
中,它会起作用。
参见 this fiddle用于演示。
编辑 关于评论的背景:
当您 float 内容时,父容器(在本例中为 quickLinksContainer
)不知道内容有多大。因此,要使容器具有正确的大小,您必须指定它。比如像这样:
div.quickLinksContainer {
height: 150px;
}
关于Css3 快速链接容器背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15266598/