跨度不会在页脚中对齐

Question

我有一些填充我的页脚的跨度元素，我试图让版权范围正确对齐，而不是与所有其他元素捆绑在一起。请你告诉我我哪里出错了？

<footer>

    <span>Blog</span><span>Hire</span><span>About</span><span id="copyright">Copyright &copy; 2012 Max Kramer</span>

</footer>

footer {
    width:  50%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

footer span {
    display: inline-block;
}

footer span #copyright{
    text-align: right;
}

Answer 1

首先，删除span和它的ID之间的空格 - 它们是相同的元素，而不是嵌套在span中的ID。第二，使用float，而不是text align：）

footer span#copyright{
  float: right;
}

您也可以这样做：

footer #copyright{
  float: right;
}

你也不需要为跨度指定“inline-block” - 无论如何这都是“display”的默认值。

Answer 2

span是一个流对象，意味着它没有宽度。要给它一个宽度，它需要是一个块元素，它将为您提供一个宽度以使其正确对齐。但是通过使它成为block，它将被推到其他跨度下面的行，这使得你需要将它漂浮正确。

你需要：

#copyright {
    text-align: right;
    display: block;
    float: right;
}