页脚无序列表重叠问题

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 元素是块元素。因此，元素本身旁边的任何内容都将移至它自己的行。您必须基本上取出 p 元素本身假定的 'full width'。

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

Answer 2

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

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

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

页脚无序列表重叠问题

Footer Unordered list overlapping issue

css

list

footer

overlapping

unordered