Question

以下是我的代码：

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

我正在尝试为整个列表添加背景颜色。某些方式它没有出现。我无法弄清楚原因。请帮助

Answer 1

由于您有float: left，因此需要清除它们。添加：

.list {
  list-style-type: none;
  background-color: purple;
  overflow: hidden;
}

工作代码段

＆＃13;

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

Answer 2

请尝试以下操作： 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

Answer 3

哟必须在添加颜色的地方添加溢出隐藏。它为我工作：

 <style>
  .list  {
    list-style-type: none;
    background-color:purple;
    overflow: hidden;
  }
  .list li {
    float: left;
    margin: 5px;
  }
  .link{
    font-color:white;
  }
</style>

Answer 4

请尝试这个：

请添加css

.list li {
        float: left;
        margin: 5px;
          background-color:gray;
      }

http://jsfiddle.net/ivinraj/1cbo4grd/2/

背景颜色未出现在无序列表中

4 个答案: