css - 如何使跨度元素的边距正确工作？

Question

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

score 5 · Accepted Answer

试试这个（jsFiddle）

.right-corner {
    float:right;
}

或者这个（jsFiddle）

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

margin-right 不起作用的原因是因为它只是给你的元素一个右边距而不是重新定位它。为了帮助你理解，如果你在你的元素后面加上一些东西，margin-right它们之间会有一个间隙，这就是边距。

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

看看这个小例子来尝试理解。如果你不明白，你应该阅读CSS 盒子模型。

CSS 盒子模型，来自 www.w3.org/TR/CSS2/box.html

score 1 · Accepted Answer

1

我认为您正在寻找的是 float:right;

于 2013-03-10T05:58:00.273 回答

score 1 · Accepted Answer

Margin-right 是右边距。

如果你想将它向右对齐，你可以使用 right:10px ，如果位置是绝对的。

否则你可以使用 float:right

您还可以将 display:inline-block 设置为跨度。

score 1 · Accepted Answer

为了完成@Tyriar 的回答，这里有一个小提琴也向您展示了text-align: right. 以及为什么可以存在边距但没有可观察到的效果。以及如何clear在浮动元素和/或浮动元素容器上的 clearfix 之后使用该属性（此处两者都不是必需的）

还有一个建议：如果你不是真的（真的）确定你想要实现什么以及如何实现，就不要使用绝对定位；大多数时候它不是解决 CSS 问题的最佳方法。完全脱离流程，其内容将毫无顾忌地显示在其他内容之上......

4 回答 4