页脚无序列表重叠问题

Question

我的页脚问题是我一直想弄清楚的。我的无序列表设置为右浮动，但由于某种原因导致它离开父div。

有人可以向我解释我做错了吗？

问题截图：

.footer-content {
  width: 980px;
  height: 40px;
  margin: auto;
}
.footer-content p {
  padding-top: 9px;
}
.footer-content ul {
  list-style: none;
}
.footer-content ul li {
  padding-left: 10px;
  display: inline-block;
  float: right;
}
.footer-content ul li a {
  text-decoration: none;
  color: #0066cc;
}
.footer-content ul li a:hover {
  text-decoration: underline;
}
.footer-content ul li a:visited {
  color: #0066cc;
}

<footer>
  <div class="footer-content">
    <p>Copyright &copy; 2015 - 2016 Nexishost, inc. All Rights Reserved.</p>
    <ul>
      <li><a href="#">Terms & Conditions</a>
      </li>
      <li><a href="#">Privacy Policy</a>
      </li>
    </ul>
  </div>
</footer>

Answer 1

由于您使用float: right;来定位ul，因此您需要float: left; p元素。

原因是p元素是块元素。因此，元素本身旁边的任何内容都将移动到它自己的行。你必须基本上取出全宽＆＃39;由p元素本身假设。

要了解有关块级别和内联级别元素的更多信息，请查看this resource。

Answer 2

UL也是一个块元素（就像p）。由于您在列表项而不是UL块本身上使用float，因此另一个选项是通过添加display：inline来更改ul的显示。

.footer-content ul {
  list-style: none;
  display:inline;
}

修改：已添加jsfiddle。您必须水平滚动才能查看（宽度为980像素）