0

クイック リンク コンテナー用の次の CSS3 コードがあります。理由はわかりませんが、グラデーションの背景がテキストの下にありません。float: leftからを削除するdiv.quicklinksと、グラデーションの背景が表示されますが、左側にテキストが必要です。ありがとう

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

1 に答える 1

0

背景がコンテンツの背後にない理由は、

div.quickLinks {
    float:left;
}

背景のグラデーションを直接内側div.quickLinksに配置すると、機能します。

デモについては、このフィドルを参照してください。

コメントの背景について編集：

コンテンツをフロートさせると、親コンテナ（この場合quickLinksContainer）はコンテンツの大きさを認識しません。したがって、コンテナのサイズを正しくするには、コンテナを指定する必要があります。たとえば、次のようになります。

div.quickLinksContainer {
    height: 150px;
}

更新されたフィドルを見る

于 2013-03-07T09:14:01.350 に答える