Css3快速链接容器背景

我有以下CSS3代码的快速链接容器。我不知道为什么，但渐变背景不在文字之下。如果我从div.quicklinks中删除float: left，我将显示渐变背景，但我想要一些文本在左侧。感谢Css3快速链接容器背景

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

来源

2013-03-07 user2143407

原因背景是不是后面的内容是因为

div.quickLinks { 
    float:left; 
}

如果您而直接把背景渐变内div.quickLinks它会奏效。

请参阅this fiddle进行演示。

编辑在背景上的评论：

当你漂浮的内容，父容器，在这种情况下quickLinksContainer，不知道内容有多大。因此，要让容器具有正确的大小，您必须指定它。比如像这样：

div.quickLinksContainer { 
    height: 150px; 
}

见updated fiddle

来源

2013-03-07 09:14:01 jurgemaister

如果我把坡度只有文本内将有梯度....所以....丑.... – user2143407 2013-03-07 09:18:47

我认为是你想要的。你想做什么？ – jurgemaister 2013-03-07 09:20:24

我想要一个渐变背景遍布快速链接容器（页脚）不仅在文本背后.... – user2143407 2013-03-07 09:22:58

Css3快速链接容器背景

回答

相关问题