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快速鏈接容器背景

回答

相關問題