1

我的页脚有问题，我一直在尝试解决这个问题。我的无序列表设置为向右浮动，但这导致它出于某种原因离开了父 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>

4

2 回答 2

2

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

原因是p元素是块元素。因此，元素本身旁边的任何东西都将移动到它自己的行。您必须基本上取出p元素本身假定的“全宽”。

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

于 2015-08-09T19:03:17.880 回答
0

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

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

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

于 2015-08-09T19:13:30.970 回答