如何使span元素正确地工作？

Question

我有一个span元素，我希望它出现在页面的右上角。为此，我使用了margin-right:10px。但它没有显示效果。 margin-left的工作原理。为什么是这样？以及如何使span元素出现在页面的右侧？

Answer 1

试试这个（jsFiddle）

.right-corner {
    float:right;
}

或此（jsFiddle）

.right-corner {
    position:absolute:
    top:0;
    right:0;
}

保证金权利不起作用的原因是因为它只是给你的元素一个右边距而不是重新定位它。为了帮助您理解，如果您使用margin-right在元素之后放置一些内容，那么它们之间就会存在差距，即差距。

margin-left这样做也是如此，它只是在左侧进行，因为元素是从左到右的位置，左侧的间隙看起来就像向右移动一样。

看一下this little example试图理解。如果您不理解，请阅读CSS box model。

Answer 2

我认为你要找的是浮动：对;

Answer 3

保证金权利是正确的保证金。

如果你想将它对齐到右边，你可以使用右：10px，即如果位置是绝对的。

否则你可以使用float：right

您还可以将display：inline-block设置为span。

您可以了解有关边距的更多信息 http://phrogz.net/css/htmlvsbody.html http://www.htmldog.com/guides/cssbeginner/margins/

Answer 4

为了完成@Tyriar的回答，这里还有一个小提琴，向您展示 text-align: right 的用法。为什么保证金可以存在但没有可观察到的影响。另外如何在浮动元素的容器和/或浮动元素的容器上使用clear属性之后（这里都不需要）

http://jsfiddle.net/rLQbk/

还有一条建议：如果你真的（非常）确定你想要达到的目标和方式，不要使用绝对定位;大部分时间它不是CSS问题的最佳解决方案。完全脱离流程，其内容将显示在其他内容上而无需任何关心......