如何将元素定位到右侧？

Question

我试图将一个 css 元素放在标题的右侧，但不确定具体如何操作。我尝试使用：

  position: Absolute; top: 20px; right 0px;

那会起作用，但是如果您调整浏览器，文本会随之移动。

我创建了一个 JFiddle，您可以在这里找到它：

http://jsfiddle.net/rKWXQ/

这样你就可以看到我正在尝试做什么。我在包装的 div 元素中有一个文本，上面写着 Call Now [phone]。

这是标头元素，在其中我有一个 right_header 元素。

     <div id="header">
        <span class="right_header">Call Now [phone]</span>
    </div>

这是我的标题 CSS：

    /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

有人可以告诉我完成此操作的正确方法吗？

请注意，左侧将有一个不会在 JFiddle 中加载的徽标！

谢谢！

原文由 Frank G. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以轻松地将 float 它放在右边，不需要 relative 或 absolute 定位。

 .right_header {
    color: #fff;
    float: right;
}

更新的 jsFiddle - 可能需要添加一些 padding / margins 像这样。

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

还有两种方法：

1. 在要定位到其父元素右侧的元素上使用边距。

 .element {
  margin-right: 0px;
  margin-left: auto;
}

1. 在父元素上使用 flexbox：

 .parent {
  display: flex;
  justify-content: right;
}

原文由 Flip 发布，翻译遵循 CC BY-SA 4.0 许可协议