html - 跨度不会在页脚中右对齐

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;
}

您也不需要为 span 指定“inline-block”——无论如何，这是它们的“display”默认值。

Answer 2

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

你需要：

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