html - 不会向内移动到页脚，即使它是？

Question

列表不会在页脚内移动，即使它在 标签。

我尝试查看另一个有用的网站和一些SO 中的线程，但没有运气....

我也试过放置 float:left 等...

HTML:

  <footer>
                  <!-- <section class="f-sec1"> -->
                       <!-- <h5>CAD | Tech Website&copy;</h5> -->
                       <ul class="f-li">
                        <li><a href="index.html" class="current">Home</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="contact.php">Contact</a></li>
                        <li><a href="about.html">About us</a></li>
                  </ul>

                        <br>



                  </section>
             </footer>

CSS:

   footer {
       background: #444;
   }

   /* First Section */

   .f-sec1 h5 {
       color: #FFFFFF;
   }

   .h-sec {
       font: 22px Arial, Helvetica;
   }

   .sec {
       font: 9px, Arial, Helvetica;
   }

   .fl-li {
       list-style-type: none;
   }
   .f-li li a {
       color: #000000;
       float: right;
   }

   .f-li .current {
       color: #A9A9A9;
       text-decoration: underline;
   }

Answer 1

当您关闭页脚而不是该部分时它工作正常。

footer {
  background: #444;
}


/* First Section */

.f-sec1 h5 {
  color: #FFFFFF;
}

.h-sec {
  font: 22px Arial, Helvetica;
}

.sec {
  font: 9px, Arial, Helvetica;
}

.f-li {
  list-style-type: none;
}

.f-li li a {
  color: #000000;
  float: right;
}

.f-li .current {
  color: #A9A9A9;
  text-decoration: underline;
}

<footer>
  <!-- <section class="f-sec1"> -->
  <!-- <h5>CAD | Tech Website&copy;</h5> -->
  <ul class="f-li">
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.php">Contact</a></li>
    <li><a href="about.html">About us</a></li>
  </ul>
</footer>