跨度不会在页脚对齐

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。第二，使用浮动，而不是文本对齐:)

footer span#copyright{ 
    float: right; 
} 

你也可以只是这样做：

footer #copyright{ 
    float: right; 
} 

你也不需要指定“inline-block的”为跨度 - 那是他们的默认无论如何，“显示”的值。

Answer 2

span是一个流对象，意味着它没有宽度。为了给它一个宽度，它需要是一个块元素，它会给你一个宽度来对齐它。但是通过将其设置为block，它将被推下到其他跨度下方的行，这使您需要将它浮动到右侧。

您需要：

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